javascript - 将事件监听器附加到动态创建的输入文本上

标签 javascript jquery event-listener dynamicobject

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

谢谢

最佳答案

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

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

如果您使用 jQuery 进行编程,则会容易得多,您可以向主体添加一个单击处理程序,该处理程序会忽略您作为第二个参数输入的元素 id/类之外的所有内容 (ID = #{ELEMENT_ID} ,CLASS = .{ELEMENT_CLASS}

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

这里是一个 jQuery 和 vanilla js 示例的 fiddle :https://jsfiddle.net/67m4qr1h/1/

希望这有帮助:)

关于javascript - 将事件监听器附加到动态创建的输入文本上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60729920/

相关文章:

javascript - Kendo UI 网格多列使用字段名称隐藏/显示

javascript - jQuery 是否清空通过 addEventListener 附加的分离监听器?

c# - 事件监听器的目的是什么?

javascript - Angular 前端未对 Flask 应用程序进行休息调用

javascript - 如何在运行时修改 javascript 代码?

javascript - 如何将 Javascript 单例更改为可以多次使用的东西?

javascript - 使用 jquery onclick 更改 url

javascript - 远程 javascript 文件上的 jquery 单击监听器

javascript - 我可以将具有 HTML 5 Doctype 的页面加载到具有 Frameset Doctype 的页面上的框架中吗?

javascript - 使用 Javascript 选择嵌套元素