Question

我在我的js代码中有这个：

window.onload = function()
{
    document.getElementById('change_user').addEventListener("click", function()
    {
        getUserData(document.getElementById('change_user').getAttribute('data-user'));
    }, false);
}

第一次单击元素时它会起作用，但是当元素被新的HTML代码替换时，单击它不再有任何作用。

出了什么问题？

Answer 1

删除元素后，也会删除任何绑定事件。如果稍后重新添加相同的元素，则需要再次绑定该事件。

在这种情况下，更好的方法可能是收听正文上的点击事件，然后检查目标是否是change_user元素。这称为事件委派。

有关普通JS示例，请参阅https://davidwalsh.name/event-delegate。

仅供参考，使用jQuery非常容易：

$('body').on('click', '#change_user', function() {…});

请参阅http://api.jquery.com/on/#example-9

Answer 2

替换元素时，事件处理程序将丢失。事件处理程序附加到特定元素。当您更改父级的HTML时，所有子元素都将完全替换为新的元素，这些元素开始时没有事件处理程序。

您有多种选择：

替换元素后，在新元素上建立新的事件处理程序。
停止替换元素本身，只修改现有元素的内容。如果元素本身未被替换，则事件处理程序将保持不变。
切换到使用非自身替换的父对象的委托事件处理。这依赖于这样一个事实，即许多事件在父链中冒出来并且可以在那里被截获，即使子元素来来去去或被替换。

您可以在以下其他答案中阅读有关委派事件处理的更多信息：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

Should all jquery events be bound to $(document)?

这些其他答案引用了jQuery，但无论是使用jQuery还是使用普通的Javascript，概念都是相同的。

单击事件以使新DOM元素无效

2 个答案: