js 拼接HTML字符串 onclick事件传多个参数问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js字符串拼接onclick出现的问题</title>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script src="../../../js/jquery1.7.js"></script>
<script>
function show(a,b) {
//console.log(a.name);
//console.log(a.age);
console.log(a);
console.log(b);
}
function show2(a) {
console.log(a);
alert(a);
console.log(a.name);
console.log(a.age);
}
var arr = [
{
name:'wangwu',
age:23,
hight:[180,180,180]
},
{
name:'zhangsan',
age:22,
hight:[180,160,180]
},
{
name:'lisi',
age:21,
hight:[180,170,180]
}
]
var ht=''
for(var i=0 ; i< arr.length ; i++){
//错误示范1,点击事件不触发
//ht = ht + '<div><button οnclick="show(arr[i].name,arr[i].age)">我是按钮'+i+'</button></div><br>'
//错误示范2,点击事件在页面加载时候就已执行
//ht = ht + '<div><button οnclick="'+show(arr[i].name,arr[i].age)+'">我是按钮'+i+'</button></div><br>'
//错误示范3,点击事件不触发
//ht = ht + '<div><button οnclick="show('+arr[i].name+','+ arr[i].age +')">我是按钮'+i+'</button></div><br>'
//错误示范4
//ht = ht + '<div><button οnclick=show2("'+arr[i]+'")>我是按钮'+i+'</button></div><br>'
//正确示范1
//ht = ht + '<div><button οnclick=show("'+arr[i].name+'","'+ arr[i].age +'")>我是按钮'+i+'</button></div><br>'
//正确示范2
ht = ht + '<div><button οnclick=show2('+JSON.stringify(arr[i])+')>我是按钮'+i+'</button></div><br>'
}
$('#box').append(ht)
</script>
————————————————
版权声明：本文为CSDN博主「Altaba」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Altaba/article/details/78364939
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js字符串拼接onclick出现的问题</title>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script src="../../../js/jquery1.7.js"></script>
<script>
function show(a,b) {
//console.log(a.name);
//console.log(a.age);
console.log(a);
console.log(b);
}
function show2(a) {
console.log(a);
alert(a);
console.log(a.name);
console.log(a.age);
}
var arr = [
{
name:'wangwu',
age:23,
hight:[180,180,180]
},
{
name:'zhangsan',
age:22,
hight:[180,160,180]
},
{
name:'lisi',
age:21,
hight:[180,170,180]
}
]
var ht=''
for(var i=0 ; i< arr.length ; i++){
//错误示范1,点击事件不触发
//ht = ht + '<div><button οnclick="show(arr[i].name,arr[i].age)">我是按钮'+i+'</button></div><br>'
//错误示范2,点击事件在页面加载时候就已执行
//ht = ht + '<div><button οnclick="'+show(arr[i].name,arr[i].age)+'">我是按钮'+i+'</button></div><br>'
//错误示范3,点击事件不触发
//ht = ht + '<div><button οnclick="show('+arr[i].name+','+ arr[i].age +')">我是按钮'+i+'</button></div><br>'
//错误示范4
//ht = ht + '<div><button οnclick=show2("'+arr[i]+'")>我是按钮'+i+'</button></div><br>'
//正确示范1
//ht = ht + '<div><button οnclick=show("'+arr[i].name+'","'+ arr[i].age +'")>我是按钮'+i+'</button></div><br>'
//正确示范2
ht = ht + '<div><button οnclick=show2('+JSON.stringify(arr[i])+')>我是按钮'+i+'</button></div><br>'
}
$('#box').append(ht)
</script>
————————————————
版权声明：本文为CSDN博主「Altaba」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Altaba/article/details/78364939
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
2013-12-23 WPF资源
2013-12-23 wpf 中关于Image中样式Style的一点总结
2013-12-23 声明事件 和 定义引发事件的方法