如果包含它的页面由 AJAX 加载（实际上是 PJAX），则 jQueryUI tabs() 不起作用答案

【问题标题】：jQueryUI tabs() not working if the page containing it was loaded by AJAX (PJAX actually)如果包含它的页面由 AJAX 加载（实际上是 PJAX），则 jQueryUI tabs() 不起作用
【发布时间】：2012-03-03 04:32:45
【问题描述】：

我的问题是关于 jQuery 如何找到在 AJAX 加载之前不存在的各种 DOM 节点。

我的特殊问题是我的 jQueryUI tabs() 脚本仅在它与 AJAX 加载的页面片段上的选项卡 div 一起包含时才有效。如果在选项卡 div 存在之前（即，在加载 ajax 之前）作为原始主模板页面的一部分加载此脚本将不起作用。

为了解释我的意思，这里有一些简单的代码描述：

 $('a.ajax').live('click', function(){
   $.ajax({ url: '/get_page_with_tabs', 
         success: function(data){ 
         $('div#ajax').append(data); // the content that gets replaced
         } 
   });
});

 $('div#tabs').tabs(); 
 // this script must be part of the "data" along with the <div id="tabs></div>
 // it can't be loaded along with the main template page which contains: <div id="ajax">    </div> and the $.ajax script

只有一个旁注是我实际上使用的是PJAX，但这在异步 div 加载方面似乎与 jQuery AJAX 功能相同。

【问题讨论】：

标签： dom jquery jquery-ui-tabs pjax

【解决方案1】：

how jQuery finds various DOM nodes that don't exist until they are loaded by AJAX

没有找到。

将选项卡初始化代码移至 AJAX 响应处理程序：

$('a.ajax').live('click', function(){
   $.ajax({ url: '/get_page_with_tabs', 
         success: function(data){ 
         $('div#ajax').append(data); // the content that gets replaced
         $('div#tabs').tabs(); 
         } 
   });
});

使用live 和on，您可以将事件处理程序附加到页面中尚不存在的元素（稍后可以通过ajax 调用或append 之类的函数添加）。

由于event "bubbling"，jQuery 可以捕获这些事件 - 基本上，更高/上级的父级捕获子事件...

【讨论】：

嗨 J.Bruni，请参阅我编写的代码，因为我使用的是 live() 方法，尽管我猜我的元素是标签 div 的父元素，因此冒泡的方向错误并且行不通，是/否？
"parents" 与元素的嵌套有关，而不是创建顺序：<ul><li>Hi</li></ul> - 这里，li 是 ul 的子元素，并且ul 是 li 的父级
$('a.ajax').live('click', function 做什么？它为现在和将来存在的所有a.ajax锚附加“函数”作为“点击事件处理程序”（稍后包括新的a.ajax元素）——这只是可能的，因为“事件冒泡” - 与选项卡或 div#tabs 无关
是的。也许我以一种令人困惑的方式混合了主题。在这种情况下，您需要在 tabs() 的 div 存在时对其进行初始化。我只想进一步了解 为什么 它似乎你可以用尚未出现的元素做一些事情......（不是选项卡案例）
你不应该需要它，但这是一个有趣的想法。像$('div#tabs').later(function(){ $(this).tabs() });... 这样的东西是可行的，但是对于所有 DOM 插入的情况，这都是很困难的；限制少数情况的范围（比如 AJAX 调用返回 HTML ......）会容易得多。

【解决方案2】：

如果您使用 ajax 加载选项卡，则需要在 ajax 完成后对其进行初始化。如果您尝试使用 ready 事件进行初始化，则在页面加载时，选项卡 html 不存在。

如果你替换所有的tab html，同样的故事

【讨论】：

感谢 charlietfl，所以“初始化”是指调用 tabs() 函数吗？如果是这种情况，我想我无法改变我所说的对我有用的东西。
正确，在插入html后成功调用tabs()函数。