单击新 DOM 元素不起作用的事件

Click event for new DOM element not working

本文关键字：事件 不起作用 元素 DOM 单击      更新时间：2023-09-26

我的js代码中有这个：

window.onload = function()
{
    document.getElementById('change_user').addEventListener("click", function()
    {
        getUserData(document.getElementById('change_user').getAttribute('data-user'));
    }, false);
}
当我第一次单击该元素时，

它可以工作，但是当该元素被新的HTML代码替换时，单击它不再执行任何操作。

怎么了？

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

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

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

仅供参考，使用jQuery很容易做到：

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

见 http://api.jquery.com/on/#example-9

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

您有以下几种选择：

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

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

jQuery .live(( vs .on(( 方法用于在加载动态 html 后添加点击事件

jQuery.on(( 是否适用于创建事件处理程序后添加的元素？

是否应该将所有 jquery 事件绑定到 $(document(？

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

相关文章：