Question

我正在使用AHAH在文档准备好后加载一段HTML。在那块HTML中我有一个按钮，我想将.click事件应用到。在加载HTML后我无法应用该事件。回调非常通用，并且被页面的其他部分使用，因此我不希望用特定代码填写它。有什么想法吗？

Answer 1

使用.live（）方法：http://api.jquery.com/live/

Answer 2

这就是为live方法构建的。

您最好的选择是使用它，或者将event listener添加到您的包含元素（甚至是body）。 Live非常适合泡泡的事件。事件监听器是那些没有的事件的解决方案。

Answer 3

正如其他人指出的那样，您要考虑使用$.live()，它将处理所有预先存在的DOM元素的事件，以及稍后添加的任何事件。例如，假设您加载的HTML块包含一组包含类名“foo”的链接，所有这些链接在单击时都应以特定方式响应：

$(".foo").click(function(){
  // I don't do anything to dynamicall-added elements
});

此示例仅适用于包含类名“foo”的预先存在的项目。要处理当前和未来的元素，我们应该执行以下操作：

$(".foo").live("click", function(){
  // I handle both present, and future elements
});

如果它包含类名“foo”，那么任何时候添加的任何内容都将由此处理。这适用于像你这样的情况，在页面的生命周期中稍后会将大块的html插入DOM中。

Answer 4

我认为您必须使用 live 方法来对动态加载的内容作出反应。

<强> live Video Demonstration

Answer 5

正如大家所说的.live（）方法是专为此目的而设计的，你正在讨论.live（）处理的click事件，所以继续并使用它，它将是最简单/最快的方式要做到这一点。

只是一个建议，你说你有一个非常通用的回调函数，对于一个非常类似的情况我不能使用.live（）（之后我不得不做一些相当复杂的处理）所以我增加了灵活性它通过向初始调用添加一个参数，以便调用代码可以指定自定义回调。这些方面的东西：

callToAGenericService({url: '...', target: someId, callback: function myCustomCallBack (xhr) {
   console.log('Custom callback');
   console.dir(xhr);
}});

并且通用服务泛型回调被修改为这些行：

function genericServiceCallback(options,xhr) {
   //Do the 'generic processing' of the request

   // if calling code specified a custom callback, execute it
   if (options.callback) {
      options.callback(options,xhr);
   }
}

显然要复杂得多（主要是错误和范围处理），但提出了一个想法。

如何使用JQuery将事件应用于动态加载的DOM节点？

5 个答案: