如何將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處不可用的元素？

回答

相關問題