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

我需要听一个的“更改”事件，但这只适用于第一个选择，有一个按钮可以为document添加更多 ，所以我需要检查是否有任何被更改，我正在做这样的事情：

 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控制我的脚本。

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

试试这个（ 用jquery ） –

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

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