document.ready（）模擬$（html）/ $。ajax

我使用jQuery在$（document）.ready（）處理程序中附加一些插件 - 例如$（「。date」）。datepicker ）。然而，當我使用$（「... html ...」），例如從$ .ajax（..，success（data）{}）或ajaxForm（{target：...}）加載內容時，，document.ready（）顯然不會被調用。更新：如指出它是調用，但我仍然不知道部分/元素被加載。

我不能再做ready（），因爲它會再次將插件重新連接到已有的元素。因此，我必須在每種情況下手動執行此操作，例如，我成功（數據）{item = $（data）; initDatePickerEtc（項目）; }。

有沒有更好的方法？

有Live Query插件可以處理事件。有什麼可以讓我跟蹤HTML元素的創建並執行操作嗎？像

$.oncreation(".date", function() { $(this).datepicker(); }); 
// or at least 
$.oncreation(function() { $(this).find(".date").datepicker(); });

大的東西，如果它也將處理現有的元素...像實況查詢工作在點擊（）調用的時候都存在，而未來創建的元素。

請注意，我會很高興跟蹤由jQuery創建的元素。所以它可能是jQuery爲它的html（）函數提供了擴展點，我猜。現在，從jQuery源也沒有：

html: function(value) { 
    return value === undefined ? 
     (this[0] ? 
      this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") : 
      null) : 
     this.empty().append(value); 
},

也許，如果我取代HTML（），使得即使3-第三方插件（比如給ajaxForm）會用我的版本（這將觸發$ .creation回調），而不是默認的jQuery的一個...它會工作嗎？這種方法存在問題 - 它不僅僅是html（），還有append（）等等，只有當$（「」）的結果被附加到文檔時，才能獲得事件。因爲當它在內存中時，我不需要datepicker（）。

來源

2009-10-19 queen3

如果它是您的選項，您可以在返回的html中包含一個$（document）.ready（）語句。在那裏傳遞的函數將在返回的html被渲染後被調用。

來源

2009-10-19 20:00:18

我將需要從那裏獲得對加載部分的引用。如果我做$（document）.ready（function（）{$（「*」）.css（'background-color'，'red'）;}）;在加載的部分，整個頁面將變成紅色而不是僅加載的div。 – queen3 2009-10-19 20:09:10

是的。我解決了這個問題，通過在元素中添加一個類並在再次執行時進行篩選：$（'*'）。not（'。doneAlready'）。css（...）。addClass（'doneAlready'）; – 2009-10-19 20:13:07

好的方法，並將工作，+1。我想知道在全局數組中跟蹤它是否更好 - 我實際上關心的是大頁面並將類添加到每個元素中......看起來像一個黑客。所以我希望有更清晰的方法。但如果沒有人認爲我必須接受這個解決方案。 – queen3 2009-10-19 20:20:49

你可能找什麼是W3C mutation events，如DOMNodeInserted和DOMNodeRemoved不幸的是，他們沒有被所有的瀏覽器（the IE family of browsers do not support them at all）的支持，所以我們需要看看實現跨瀏覽器功能的其他方式。

的方式，live()工作原理是利用event delegation，這是可能的，你可以在自己的代碼實現事件代表團。作爲example，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<title>Demo</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
$(function() { 
    $('.picker').datepicker(); 

    $('button').click(function() { 
     $(this).prev().before('<br/><input type="text" class="picker" />'); 
    }); 

    $('div.container').click(function(e) { 
     var target = $(e.target);  
     if (target.hasClass('picker') && !target.hasClass('hasDatepicker')) { 
     $(e.target).datepicker().datepicker('show'); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="container"> 
<input type="text" class="picker" /> 
<br/> 
<button>Add a new input</button> 
</div> 
</body> 
</html>

在這裏，我們檢查容器<div>上event.target，看它是否有類picker而不是類hasDatepicker（這是由日期選擇器插件添加到指示與日期選擇器的輸入附）。如果event.target符合標準，我們將日期選擇器綁定到它，然後在其上調用datepicker('show')。如果event.target已經有一個日期選擇器，那麼點擊輸入將顯示日期選擇器，如果event.target沒有picker類或沒有附加日期選擇器，則不會發生任何事情。

我選擇了datepicker，因爲你在你的問題中提到過它，但是事件委託的想法可以應用於許多不同的情況，但是，not all events bubble。

來源

2009-10-19 20:39:34

偉大的寫作！如果您需要對不冒泡的事件進行事件委託，則可以使用livequery - http://docs.jquery.com/Plugins/livequery - 它比jquery $ .live樣式事件委派的性能差，但是它可以捕捉不起泡的事件。乾杯。 – 2009-10-19 21:24:55

不知道事件如何幫助我 - html（）/ append（）是什麼事件？那麼，除了那些我不能使用，因爲用戶仍然使用IE6 ... – queen3 2009-10-20 07:58:44

您可以創建一個例程來執行插件初始化範圍到特定的根jQuery對象。事情是這樣的：

function AttachPlugins(jq) { 
    jq.Find('.date').datepicker(); 
    // other stuff 
}

你的文件準備好處理函數可以調用它像：

$(document).ready(function(){ 
    AttachPlugins($(body)); 
});

當你的Ajax處理函數可以調用它像這樣

var newElement = $(html); 
AttachPlugins(newEleemnt);

這不是完全自動化的，但它不應該。 Ajax HTML應被視爲「新鮮」且未經處理。自動附加插件會讓我感覺到SQL觸發器的做法。至少在我的方法中，您重複使用了用於附加插件的相同代碼。

來源

2009-10-19 23:06:16

正如我所說，這是我現在所做的：「我做成功（數據）{項目= $（數據）; initDatePickerEtc（ item）;}。「 – queen3 2009-10-20 06:33:10

我的答案不同。我的答案指定您從就緒和從Ajax回調中調用相同的函數。你沒有說你從你準備好的處理程序中調用了initDatePickerEtc，initDatePickerEtc也沒有看到使用jq參數來限制操作。 – 2009-10-20 06:49:47

document.ready（）模擬$（html）/ $。ajax

回答

相關問題