0

我的问题是关于 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 功能相同。

4

2 回答 2

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(); 
         } 
   });
});

使用liveandon您可以将事件处理程序附加到页面中尚不存在的元素（并且可以稍后通过 ajax 调用或append某种函数添加）。

由于事件“冒泡” ，jQuery 可以捕获这些事件- 基本上，更高/上级的父级捕获子事件......

于 2012-03-03T04:37:21.253 回答
1

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

如果您替换所有选项卡 html，同样的故事

于 2012-03-03T04:38:26.053 回答