JS innerHTML 属性后 jQuery 函数不起作用答案

【问题标题】：jQuery functions not working after JS innerHTML propertyJS innerHTML 属性后 jQuery 函数不起作用
【发布时间】：2013-10-07 11:47:55
【问题描述】：

我在我的应用程序中使用此代码：

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";

#inventory_box 元素已经存在，所以它只是将IMG 喷出到#inventory_box 中。

我想要的是能够点击这个出现IMG，id 名称为test，但不会像这样工作：

$("#test").click(function() {
                // Run this
            });

【问题讨论】：

【解决方案1】：

试试这个，

$(document).on('click',"#test",function() {
    alert('test');
});

阅读on()

【讨论】：

【解决方案2】：

由于图片是动态添加的，所以需要使用event delegation注册事件处理函数

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#inventory_box').on('click', '#test', function() {
      // Run this
});

这会将您的事件附加到#inventory_box 元素内的test 图像元素，减少检查整个 document 元素树的范围并提高效率。

【讨论】：

谢谢，但这似乎不起作用。 Rohan 的那个似乎对我有用……使用 Rohan 的那个会降低性能吗？
是的，如果你没有最近的父选择器（已经存在于 DOM 中），你将不得不使用 document 元素。唯一的问题是，代码将检查整个文档元素树以查找要添加的新图像，这需要一些时间！

【解决方案3】：

考虑使用 'append' 而不是 innerHTML。混合使用原生 JavaScript 和 jQuery 似乎会导致使用新元素更新 DOM 时出现一些延迟。下面的代码对我有用。

$("#inventory_box").append("<img src='./img/rock.gif' id='test' />")

$('#test').click(function(d){console.log("clicked!");});

【讨论】：

【解决方案4】：

您对事件处理程序的分配在有一个具有该 ID 的元素之前运行，因此在您创建一个元素后，它不会有任何事件处理程序分配给它。

正如建议的那样，解决此常见 javascript 错误的最简单方法是，您可以将事件分配给容器 DOM 元素，并使用 jquery 的事件委托在事件新添加的 DOM 元素上触发事件。

但我宁愿不使用这种方式，原因我不能给你，说，我只是不喜欢。

始终在元素创建后分配事件。例如：

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";

紧接着，执行这个：

$("#test").click(function() {
                // Run this
            });

【讨论】：

【解决方案5】：

$('#inventory_box img').click(function() {
      // Run this
});

【讨论】：