1

我需要听 a 的“更改”事件，<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它不会执行。

PS 我用纯 JS 做这件事的原因是一样的，jQuery而且我用纯 JS 对我的脚本有更多的控制权。

4

3 回答 3

7

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

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

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

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

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

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

于 2013-05-12T21:38:09.667 回答
1

不要那样附加它们，使用 jquery 中的 on 函数

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

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

于 2013-05-12T21:08:20.957 回答
0

试试这个（用jquery） -

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

即使您动态添加多个选择，这也将起作用

于 2013-05-12T21:14:31.980 回答