如何将 $(document).ready() 重新应用于通过 AJAX 加载的部分 HTML？答案

【问题标题】：How to re-apply $(document).ready() to some partial HTML loaded via AJAX?如何将 $(document).ready() 重新应用于通过 AJAX 加载的部分 HTML？
【发布时间】：2011-04-22 17:18:26
【问题描述】：

我还是一个 jQuery 新手，我正在尝试将 ThemeForest 模板集成到我的项目中。这个 ThemeForest 模板 (vPanel) 很棒，但它集成了很多 jQuery 插件和功能，所以我到处都有很多 $(document).ready() ，我很难弄清楚哪个脚本做了什么.我正在寻找它的原因是因为所有这些脚本在最初加载时都很好地应用于页面，但是我的 UI 的某些部分稍后会通过 AJAX 加载。这就是我的问题开始的地方：有没有办法将所有脚本重新应用于通过 AJAX 加载的部分 HTML？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您正在寻找的是live() event。您可能必须返回并更改某些插件，以便像

$("my_button").click(function(){ }

成为

$("my_button").live("click", function(){ }

其中“my_button”是稍后可以通过 AJAX 实现的东西。

【讨论】：

或者更好的是，使用delegate()。
而且不修改插件有没有解决办法？这太疯狂了，它看起来像一个非常常见的用例！

【解决方案2】：

如果脚本所做的只是连接事件，您可以使用delegate 方法（它替换live 方法）将它们连接到包含元素。

如果脚本对元素进行了其他更改，则您需要使用上下文参数，以便将更改重新应用到页面的特定部分。示例：

function applyTemplate(context) {
  $('.someclass', context).each(function(){
    // does something with the elements
  });
}

$(function(){
  // apply to whole page:
  applyTemplate(document.body);
  // load more content, and apply to what's loaded:
  $('#somePart').load('getpart.aspx', function(){
    applyTemplate($('#somePart'));
  });
});

【讨论】：

问题是我不知道如何实现 applyTemplate() 函数，因为模板是由一堆加载在标题中的 jquery 插件脚本组成的。所以我更多的是寻找一种方法来简单地重新应用它们。