Question

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

我的特殊问题是我的jQueryUI tabs（）脚本只有在与AJAX加载的页面片段上的tabs 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但这在功能上与jQuery AJAX在异步div加载方面相同。

Answer 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可以捕获这些事件 - 基本上，更高/更高的父级捕获子事件......

Answer 2

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

如果您替换所有标签html，相同的故事

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

2 个答案: