js 拼接HTML字符串 onclick事件传多个参数问题

最新推荐文章于 2024-08-23 16:56:25 发布

Altaba

最新推荐文章于 2024-08-23 16:56:25 发布

阅读量2.4w

点赞数 3

分类专栏： JavaScript 文章标签： JS 前端 javascript jquery js算法

本文链接：https://blog.youkuaiyun.com/Altaba/article/details/78364939

版权

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

欢迎来到Altaba的博客 2017年10月27日

问题：烦躁工作让技术博客停了好久才更新，实在对不住大家和自己了，今天重新捡起来

直接上源码

<!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>

正确示范 1,2为可解决办法