Question

我需要收听<select>的“更改”事件，但这只适用于第一个选择，有一个按钮可以向<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之外执行它，它就不会执行。

P.S。我用纯JS做这个原因和jQuery一样，我用纯JS控制我的脚本。

Answer 1

将事件直接附加到DOM节点很好，因为这些节点已经存在于DOM中。

但是，正如您的案例所要求的那样，有一种更好的方法可以将给定事件的处理程序绑定到将来添加的当前节点和节点。

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

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

查看此示例以获得更好的主意：http://jsfiddle.net/6HqqA/。

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

Answer 2

不要以这种方式附加它们，使用jquery中的on函数

$(document).on('change', 'select', function(){
// your code
});

http://api.jquery.com/on/

Answer 3

试试这个（ with jquery ） -

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

即使您动态添加多个选择

，这也会有效

在DOM Content Loaded之后附加的元素中的事件侦听器

3 个答案: