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

Question

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

由于文档已经加载，当我使用 jQuery 的 .html 函数替换 HTML block 时，具有 jQuery(document).ready(function() {...}) ; 不会执行，因为页面加载很久之前，这只是被替换的 HTML 片段。

当通过 AJAX 加载内容时，附加事件处理程序的最佳方式是什么？事件处理程序的代码与它感兴趣的 HTML 一起打包？我是否应该在 HTML 之后放置一个 javascript 程序 block ，以便当我插入新的 HTML block 时，jQuery 会立即执行 javascript？ HTML 是否确实位于 DOM 中并准备好由同一 .html 调用中的 JavaScript 执行？

Answer 1

一些事件可以使用 .live() 绑定(bind)到当前和 future 的元素 http://api.jquery.com/live/ :

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

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

• 它不适用于原生 DOM元素所以 $('table').live('click',功能(){});行不通。
• 它不能像$('.somediv').next().live('点击',功能(){});行不通。

.delegate()方法应该减轻这些限制，但我知道它有其自身的局限性。我实际上还没有使用过这个……不需要。来自文档:

Delegate is an alternative to using the .live() method, allowing for each binding of event delegation to specific DOM elements.

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

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