1. 程式人生 > >js 拼接HTML字串 onclick事件傳多個引數問題

js 拼接HTML字串 onclick事件傳多個引數問題

歡迎來到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 onclick="show(arr[i].name,arr[i].age)">我是按鈕'+i+'</button></div><br>'

        //錯誤示範2,點選事件在頁面載入時候就已執行
        //ht = ht + '<div><button onclick="'+show(arr[i].name,arr[i].age)+'">我是按鈕'+i+'</button></div><br>'

        //錯誤示範3,點選事件不觸發
        //ht = ht + '<div><button onclick="show('+arr[i].name+','+ arr[i].age +')">我是按鈕'+i+'</button></div><br>'

        //錯誤示範4
        //ht = ht + '<div><button onclick=show2("'+arr[i]+'")>我是按鈕'+i+'</button></div><br>'

        //正確示範1
        //ht = ht + '<div><button onclick=show("'+arr[i].name+'","'+ arr[i].age +'")>我是按鈕'+i+'</button></div><br>'
        
        //正確示範2
        ht = ht + '<div><button onclick=show2('+JSON.stringify(arr[i])+')>我是按鈕'+i+'</button></div><br>'


    }

    $('#box').append(ht)
</script>
正確示範 1,2為可解決辦法