onclick函数处于循环中，无需单击即可执行

Question

我从暴雪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);

});

很适合您的时间-Morten

Answer 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 );