jQuery .on（）方法没有看到新的元素

我得到一个JSON元素，并从它的项目，像这样构build一个列表：

getTitles: function(data) { data = data || {}; var list = []; $.getJSON( '/titles', data, function(data) { $.each(data.data, function(key, val) { list.push( '<li><a href="'+ val.href +'">'+ val.title +'</a><span class="count">'+ val.count +'</span></li>' ) }); $('#title-items').html(list.join('')); } ); } 

而我绑定点击事件a像这样a元素：

 $('a').on('click', function(e) { alert('clicked'); e.preventDefault(); }); 

旧的元素显示警报，但新的跟随URL。 事件处理程序不适用于新的。 我该如何解决这个问题？

Answer 1

您没有使用正确的代码来获得实时function。

 $('#title-items').on('click', 'a', function(e) { alert('clicked'); e.preventDefault(); }); 

1. 首先，select你的共同的祖先元素（在这个例子中#title-items ）。 如果你想处理所有 a元素，你也可以在这里使用document 。
2. 传递事件types（ on ）， 然后是子select器（ a ），然后是事件的callback函数。

现在，当click事件冒泡到#title-items ，它将检查元素是否是a元素，如果是，则触发callback。

Answer 2

您希望使用事件委托来捕获在任何时间点在DOM中出现的事件触发的事件：

 $(<root element>).on('click', 'a', function(e) { alert('clicked'); e.preventDefault(); }); 

UPDATE – 在这个例子中， <root element>是绑定时绑定到的DOM链接的祖先。

基本的想法是，由于我们不能将事件处理程序附加到DOM中尚未存在的DOM元素，所以我们将事件处理程序附加到祖先元素，并等待事件冒泡到祖先元素。 一旦事件到达祖先事件， event.target属性将被检查以查看最初单击的元素是什么。

Answer 3

您可以使用arrive.js库（它在内部使用MutationObserver ）。

 document.arrive('a', function(){ // 'this' refers to the newly created element var newElem = this; });