如何将jQuery应用于在Document.Ready处不可用的元素？

我正在开发的网站使用jQuery UI tabs到load content via AJAX（在这种情况下，每个选项卡由部分页面组成）。这很好，我对这些结果感到满意。然而，我反复遇到的一个问题是，当我在我的master.js文件（我用于站点范围的Javascript）中包含jQuery时，它不适用于通过AJAX加载的任何内容。例如，我尝试了一些简单的方法，例如：如何将jQuery应用于在Document.Ready处不可用的元素？

// Theme all the buttons with jQuery UI themes. 
$('input:button').button();

但是，选项卡上的所有按钮都没有适当的主题。

我该如何解决这个问题？我在想jQuery's .live() function，但'负载'和'准备'事件似乎没有工作。这已经成为一个相当令人沮丧的问题，所以任何可以提供的帮助都将是最受赞赏的。

来源

2010-09-09 JasCav

你能提供一些你有问题的代码吗？使用live或delegate是最有可能的方式，但并非所有事件处理程序都需要使用live或delegate进行绑定。 – 2010-09-09 14:44:36

您可以将其应用到您的AJAX回调那些新要素：

$.ajax({ 
    url:'/some/path', 
    success: function(resp) { 
     var $newElements = $(resp); //create jQuery object of new elements 
     $newElements.find('input:button').button(); // call .button() on inputs 
     $newElements.appendTo('body'); // append to wherever 
    } 
});

我不知道什么是您的AJAX回调的发生，但这应该给你的总体思路。

来源

2010-09-09 14:53:36 user113716

这工作，虽然我需要通过jQueryUI选项卡的“加载”功能（这是每个标签加载后调用）使用回调。在这里查看更多（对于任何有兴趣的人）：http://stackoverflow.com/questions/740652/jquery-ui-tabs-callback-after-ajax-loading-a-tab – JasCav 2010-09-09 15:21:38

那么，livequery插件（http://docs.jquery.com/Plugins/livequery）曾经被用于这样的很多东西。不过，这不是解决问题的最有效方法。

如果您通过AJAX添加内容，为什么不在添加内容后为内容重新分配处理程序？

// setup simple jQuery plugin to handle all of your custom logic (although this could be a normal function as well) 
$.fn.assignMyHandlers = function(){ 
    return this.each(function(){ 
     $(this).find('input:button').button(); 
     // etc 
    }); 
}; 

// and then everywhere that you bring in AJAX'd content... 
$.get('test.html', function(html) { 
    var $fragment = $(html); 
    $fragment.assignMyHandlers(); 
    $fragment.appendTo("#theList"); 
});

来源

2010-09-09 14:53:09 BBonifield

如何将jQuery应用于在Document.Ready处不可用的元素？

回答

相关问题