在动态创建的输入文本上附加 eventListener

Question

我想将 eventListener 附加到动态创建的输入文本或其他对象。由于对象尚未出现在 DOM 中或对象不可见，因此将事件附加到这些对象失败。在普通的 Javascript 或 JQuery 中有一个正确的方法来避免这个问题吗？

谢谢

Answer 1

在 vanilla JS 中，您必须将事件侦听器添加到文档并在单击某些内容时检查目标。如果要检查 class 而不是 id，则必须将 e.target.id 更改为 e.target.className。

 document.addEventListener('click',function(e){
    if(e.target && e.target.id == '{ELEMENT_ID}'){
          //do something
     }
 });

如果你用 jQuery 编程会容易得多，你可以在正文中添加一个点击处理程序，它会忽略你的元素 id/class 之外的所有内容，你将其作为第二个参数（ID = #{ELEMENT_ID}, CLASS = .{ELEMENT_CLASS}

  $('body').on('click','#{ELEMENT_ID}',function() {
    //do something
   })

这里有一个 fiddle，其中包含 jQuery 和 vanilla js 的示例：https://jsfiddle.net/67m4qr1h/1/

希望这对您有所帮助:)

Attach eventListener on dynamically created input text