在DOM内容加载后附加元素中的事件侦听器

Event listener in elements appended after DOM Content Loaded

本文关键字：元素 事件 侦听器 DOM 加载      更新时间：2023-09-26

我需要听一个<select>的"change"事件，但这只在第一次选择时才有效，有一个按钮可以将更多的<select>添加到document，所以我需要检查是否有任何<select>被改变，我正在做这样的事情:

document.addEventListener('DOMContentLoaded', function() {
    var selects = document.getElementsByClassName('select');
    for(var i=0;i < selects.length;i++) {
        selects[0].addEventListener('change', function() {
             // do something here...
        }, false);
    }
}, flase);

但这只在DOMContentLoaded时执行，如果我在document.addEventListener之外执行，它不会执行。

注:我这样做与纯JS原因是相同的jQuery，我有更多的控制我的脚本与纯JS。

直接将事件附加到DOM节点是可以的，因为这些节点已经存在于DOM中。

但是，根据您的情况要求，有一种更好的方法允许将给定事件的处理程序绑定到当前节点和将来添加的节点。

您可以使用事件冒泡:附加到节点的事件将为节点本身及其所有父节点触发。这里，我使用body元素作为父节点，但是您可以在任何元素上设置侦听器，只要它是当前和未来选择元素的父元素:

document.body.addEventListener("change", function(e) {
    console.log(e.target);
}

查看这个示例以获得更好的理解:http://jsfiddle.net/6HqqA/.

下面是对事件冒泡概念的一个很好的解释:http://davidwalsh.name/event-delegate.

不要这样附加，使用jquery的on函数

$(document).on('change', 'select', function(){
// your code
});
http://api.jquery.com/on/

试试这个(与jquery ), 

$(function(){
  $(document).on('change','select', function(){ 
    // do something here...
    var val = $(this).val();
  });
});

即使你添加了多个动态选择

相关文章：