jQuery函数在JS innerHTML属性之后无法正常工作
我在我的应用程序中使用此代码:
document.getElementById("inventory_box").innerHTML = "";
#inventory_box
元素已经存在,因此它只是将IMG
喷出到#inventory_box
。
我想要的是能够点击这个出现IMG
与id名称test
,但不会像以下一样工作:
$("#test").click(function() { // Run this });
试试这个,
$(document).on('click',"#test",function() { alert('test'); });
继续阅读()
由于图像是动态添加的,因此您需要使用event delegation
来注册事件处理程序
// New way (jQuery 1.7+) - .on(events, selector, handler) $('#inventory_box').on('click', '#test', function() { // Run this });
这会将您的事件附加到#inventory_box
元素中的test
图像元素,从而减少了检查整个document
元素树和提高效率的范围。
考虑使用’append’而不是innerHTML。 使用vanilla JavaScript和jQuery混合似乎会导致使用新元素更新DOM时出现一些延迟。 下面的代码适合我。
$("#inventory_box").append("") $('#test').click(function(d){console.log("clicked!");});
事件处理程序的赋值在具有此类id的元素之前运行,因此在创建元素之后,它将不会为其分配任何事件处理程序。
正如建议的那样,解决这个常见的javascript错误的最简单方法是,您可以将事件分配给容器DOM元素,并使用jquery的事件委托来触发事件新添加的DOM元素。
但我宁愿不使用这种方法,我不能给你的原因,比方说,我只是不愿意。
始终在创建元素后分配事件。 例如:
document.getElementById("inventory_box").innerHTML = "";
在此之后立即执行:
$("#test").click(function() { // Run this });
$('#inventory_box img').click(function() { // Run this });