0

通常，如果我想在单击链接时调用函数，我会这样做：

$('a').click(function() {
    //stuff
});

但是，即使新添加了元素，我也需要调用此函数。例如，

$('a').click(function() {
    //stuff
});
$(document.body).append($('<a href="http://example.com">This is an example</a>'))
//now when I click that example link, the function isn't called!

如何制作适用于所有链接的功能？我无法控制添加新链接的代码，所以我不能在添加新链接onclick时设置它。

小提琴

4

2 回答 2

4

使用事件委托为使用.on()动态添加的元素注册事件

$(document).on('click', 'a', function() {
    //stuff
});

演示：小提琴

于 2013-05-22T12:16:44.583 回答
4

您需要使用以下方式委托您的点击事件.on()：

$(document).on('click', 'a', function(){...});

根据文档.on()：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。

请注意， using$(document)被认为是最坏的情况示例，您希望尽可能在 DOM 中使用更接近的元素。

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。避免过度使用 document 或 document.body 来处理大型文档的委托事件。

于 2013-05-22T12:16:54.333 回答