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

How to re-apply $(document).ready() to some partial HTML loaded via AJAX?

本文关键字：加载 AJAX HTML document ready 应用于      更新时间：2023-09-26

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

您要查找的是live()事件。你可能需要回去修改一些插件比如

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

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

其中"my_button"是以后可以通过AJAX实现的。

如果脚本所做的一切都是连接事件，您可以使用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'));
  });
});
相关文章：