Javascript jQuery .on() 方法看不到新元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8650410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .on() method doesn't see new elements
提问by cnkt
I'm getting a JSON element and building a list from its items like this:
我正在获取一个 JSON 元素并从它的项目中构建一个列表，如下所示：
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(''));
}
);
}
And I'm binding click event for aelements like this:
我正在为这样的a元素绑定点击事件：
$('a').on('click', function(e) {
alert('clicked');
e.preventDefault();
});
Old aelements shows alert but new ones follow URL. Event handler doesn't work for new ones. How can I solve this?
旧a元素显示警报，但新元素遵循 URL。事件处理程序不适用于新的。我该如何解决这个问题？
回答by alex
You are not using the correct code to get livefunctionality.
您没有使用正确的代码来获得实时功能。
$('#title-items').on('click', 'a', function(e) {
alert('clicked');
e.preventDefault();
});
- First, select your common ancestor element (
#title-itemsin this example). You can usedocumenthere too if you want to handle allaelements. - Pass the event type (
on), thenthe sub selector (a), and then the callback function for the event.
- 首先，选择您的共同祖先元素（
#title-items在本例中）。document如果您想处理所有a元素，也可以在此处使用。 - 传递事件类型 (
on)，然后是子选择器 (a)，然后是事件的回调函数。
Now, when clickevents bubble up to #title-items, it will check to see if the element is an aelement, and if so, fire the callback.
现在，当click事件冒泡到 时#title-items，它将检查该元素是否是一个a元素，如果是，则触发回调。
回答by Jasper
You want to use event delegation to capture events triggered on events that are present in the DOM at any point in time:
您想使用事件委托来捕获在任何时间点出现在 DOM 中的事件上触发的事件：
$(<root element>).on('click', 'a', function(e) {
alert('clicked');
e.preventDefault();
});
UPDATE- In this example the <root element>is an ancestor of the links to which you are binding that is present in the DOM at the time of binding.
更新- 在此示例中，<root element>是绑定时存在于 DOM 中的要绑定的链接的祖先。
The basic idea is that since we can't attach an event handler to a DOM element not yet in the DOM, we attach the event handler to an ancestor element and wait for the event to bubble up to the ancestor element. Once the event reaches the ancestor event the event.targetproperty is checked to see what was the originally clicked element.
基本思想是，由于我们无法将事件处理程序附加到不在 DOM 中的 DOM 元素，我们将事件处理程序附加到祖先元素并等待事件冒泡到祖先元素。一旦事件到达祖先事件，event.target就会检查该属性以查看最初单击的元素是什么。
回答by Uzair Farooq
You can use the arrive.jslibrary (it uses MutationObserverinternally).
您可以使用到达.js库（它在内部使用MutationObserver）。
document.arrive('a', function(){
// 'this' refers to the newly created element
var newElem = this;
});
