如何让 jQuery 将事件绑定到通过 Ajax 加载的元素？答案

【问题标题】：How do you make jQuery bind events to elements loaded via Ajax?如何让 jQuery 将事件绑定到通过 Ajax 加载的元素？
【发布时间】：2010-03-10 01:01:27
【问题描述】：

我正在使用 .load() 函数来加载一个 html 部分，该部分具有绑定到某个类的一些 jQuery 功能。 =/

想法？

【问题讨论】：

【解决方案1】：

使用现场活动：

$('.className').live(function(event) {
   ...
}

在这种情况下，jQuery 保留了所有实时选择器的存储库，例如 .className。它向文档添加了一个处理程序，以侦听冒泡到文档的事件。然后，这个特殊的处理程序基本上会遍历所有实时选择器，并将事件转发到与实时选择器匹配的那些元素（如果有）。

如果任何中间事件处理程序在事件到达文档之前拦截并阻止它进一步传播，则不会执行live 处理程序。

【讨论】：

【解决方案2】：

如果您使用的是点击事件，这将是您的语法：

   $('a.myClass').live("click", function() {

        // do something here

    });

【讨论】：

【解决方案3】：

您需要使用JQuery's live function。这使您可以：

将处理程序附加到与当前选择器匹配的所有元素的事件，现在或将来。

【讨论】：

【解决方案4】：

您可以使用on() 函数。

像这样：

$(".existingElement").on('click', '.addedByAjax .className', function(){
  // ... do whatever
}

请注意，existingElement 必须在这段代码将要运行的那一刻存在。因此，您总是必须绑定到一个元素，您将通过 ajax into 将内容加载到该元素，并使用第二个选择器（on() 函数中的那个）来匹配添加的任何内容.

【讨论】：

【解决方案5】：

设置好html后必须手动绑定事件。

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
  $('.result a').click(function() {
    alert('click');
  });
});

另外，您可以使用live 来帮助解决它。

【讨论】：