如何在新创建的元素上应用 add_event_listener() ？

发布于 2024-10-13 07:14:36 字数 508 浏览 11 评论 0原文

当 DOM 已加载时，我使用此脚本应用 add_event_listener() 。

document.addEventListener("DOMContentLoaded",regFunct,false);

然后我列出了 regFunct 函数内的所有函数。从服务器加载的 regFunct 内的所有函数都在工作，除了使用 appendChild() 新创建的元素。

function regFunct(){
    //doSomething1
    //doSomething2 (create new HTML element)

    //doSomething3 (apply add_event_listener() after
    //              the new element created by doSomething2)
}

doSomething3 不起作用。

原文

I am using this script to apply add_event_listener() when the DOM is already loaded.

document.addEventListener("DOMContentLoaded",regFunct,false);

then I list all the function inside regFunct function.
all the function inside the regFunct which is loaded from the server are working except the newly created element using appendChild().

function regFunct(){
    //doSomething1
    //doSomething2 (create new HTML element)

    //doSomething3 (apply add_event_listener() after
    //              the new element created by doSomething2)
}

doSomething3 is not working.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忘东忘西忘不掉你 2024-10-20 07:14:36

对于仅在已触发 DOMContentLoaded 事件之后创建的元素，您可以创建一个委托侦听器。

这是一种可能的方法。假设您想要监听动态添加的具有 id myNewButton 的 button 上的 click 事件：

document.addEventListener('DOMContentLoaded', function(event) {
  // lets create and add the button only when DOMContentLoaded has already fired
  let btn = document.createElement('button');
  btn.id = "myNewButton";
  btn.type = "button";
  btn.textContent = "My shiny new button";
  document.getElementById('app').appendChild(btn);
})

// before the above is executed, let's add a delegate click listener
document.addEventListener('click', function(event) {
  if (event.target.id === 'myNewButton') {
    event.target.textContent += " was clicked!";
  }
})

<div id="app"></div>

请注意，这仅适用于冒泡的事件。默认情况下不冒泡的事件示例：scroll、blur、focus。

For elements that are created only after the DOMContentLoaded event already fired, you can create a delegate listener.

Here's one possible approach. Let's assume you want to listen to the click event on a dynamically added button that has the id myNewButton:

document.addEventListener('DOMContentLoaded', function(event) {
  // lets create and add the button only when DOMContentLoaded has already fired
  let btn = document.createElement('button');
  btn.id = "myNewButton";
  btn.type = "button";
  btn.textContent = "My shiny new button";
  document.getElementById('app').appendChild(btn);
})

// before the above is executed, let's add a delegate click listener
document.addEventListener('click', function(event) {
  if (event.target.id === 'myNewButton') {
    event.target.textContent += " was clicked!";
  }
})