如何确保通过AJAX插入的JavaScript将在随附的HTML(也通过AJAX接收)在DOM中准备好后执行？

Question

我已经将部分页面替换为通过AJAX调用检索的HTML.一些HTML回来的JavaScript需要运行一次才能初始化随附的HTML(设置事件处理程序).

由于文档已经被加载,当我使用jQuery的.html函数替换大块的HTML时,jQuery(document).ready(function() {...});由于很久以前加载了页面而没有执行,这只是一个被替换的HTML片段.

当通过AJAX加载内容时,附加其代码与其感兴趣的HTML一起打包的事件处理程序的最佳方法是什么？我应该在HTML之后放一个程序性的javascript块,这样当我插入新的HTML块时,jQuery会立即执行javascript吗？HTML肯定是在DOM中,并且可以通过同一个.html调用中的JavaScript执行操作吗？

Answer 1

使用.live()http://api.jquery.com/live/可以将某些事件绑定到当前和未来元素:

$('.button').live('click', function() {
  // do something.
});

.live()确实有一些限制(参见链接文档):

• 它不适用于原生DOM元素,所以$('table').live('click',function(){}); 不行.
• 它不能像$('.somediv')那样被链接.next().live('click',function(){}); 不行.

该.delegate()方法应该以缓解这些限制,但据我所知它有自己的局限性.我实际上还没有用过这个......不需要.从文档:

Delegate是使用.live()方法的替代方法,允许将事件委托的每个绑定绑定到特定的DOM元素.

您还可以在JQuery中的AJAX成功/错误/完成函数中绑定新事件:

$.ajax({
  url: 'something.html',
  success: function(data) {
    //add new elements with data.
    //bind new events to elements
  }
});