Question

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

$('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。

Fiddle

Answer 1

使用事件委派来使用.on()

为动态添加的元素注册事件

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

演示：Fiddle

Answer 2

您需要使用.on()委派点击事件，例如：

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

根据.on()的文档：

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

请注意，使用$(document)被视为最糟糕的情况示例，并且您希望尽可能在DOM中使用更接近的元素。

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

即使链接是新添加的，也可以在链接点击时调用功能

Fiddle

2 个答案: