javascript - 循环中的 onclick 函数,无需单击即可执行
问题描述
我从 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);
});
你的时间-Morten
解决方案
您输入的代码将实际执行该功能。所以,而不是:
"<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 );
推荐阅读
- doctrine-orm - 通过 @Embedded 实体的属性使用 Doctrine Criteria 过滤集合
- mysql - 将数据从 kafka 复制到 mysql ,无法使用 DOcker 和 Debezium 连接到 JDBCSinkConnector
- java - 是否有任何选项可以使 getter 表达式更短?
- html - 为表格中单元格之间的空间着色
- python - Python 装饰类文档
- revit-api - 如果我使用 2 种不同类别的墙体结构材料,如何使用 revit api 为两个不同的层设置复合结构
- c# - 将 json 反序列化为列表时的空指针
- android - 如何在协调器布局中添加拉动刷新
- node.js - facebook graph api:将别人的页面订阅到我的应用程序
- php - count():参数必须是数组或对象,在 Laravel 6 中实现了 Countable