循环中的 onclick 函数，无需单击即可执行答案

【问题标题】：onclick function in loop, executes without clicking循环中的 onclick 函数，无需单击即可执行
【发布时间】：2020-07-10 07:05:51
【问题描述】：

我从 blizzard api 获取数据（工作正常），我有一个 jquery $each 循环来检索数据，然后我将其附加到 ul 中。我想在每次循环向对象发出数据时添加一个按钮。问题是当我在循环中使用 onclick='"+myfunction(param)+"' 时，它会在我按下 onclick 所附加的按钮之前执行该功能。当我检查浏览器时，它显示 onclick="undefined"。这是代码：

let tid;
function reply_click(clicked_id){
console.log(clicked_id);
}
$('#searchnow').bind('click',
function (){
function kaldapiclass(){
    // console.log("card");
    var classSelect=$('#thisclass').val();
    $.getJSON('https://us.api.blizzard.com/hearthstone/cards? 
locale=en_US&access_token=hidden&class='+classSelect, function(data) {
        $('#kortliste').empty();
        $.each( data.cards, function(i, card) {

            $()
            $('#kortliste').append("<li id='" + card.id + "'><img src='" + card.image + "'><p>"+ 
card.name +"</p><button onclick='"+reply_click(card.id)+"'>HERE</button></li>");
        });
    });
};
clearTimeout(tid);
tid=setTimeout(kaldapiclass, 500);

});

你的时间 -莫腾

【问题讨论】：

标签： javascript jquery foreach onclick bind

【解决方案1】：

您输入的代码将实际执行该功能。所以，而不是：

"<button onclick='"+reply_click(card.id)+"'>HERE</button>"

您应该按照将元素放置在 dom 中的方式定义元素：

"<button onclick='reply_click("+card.id+")'>HERE</button>"

只有card.id 应该是动态的。

我还建议只附加一次 html，这样：

var toAppend = '';
$.each( data.cards, function(i, card) {
    toAppend += "<li id='" + card.id + "'><img src='" + card.image + "'><p>" + card.name + "</p><button onclick='reply_click(" + card.id + ")'>HERE</button></li>";
});
$('#kortliste').html( toAppend );

【讨论】：