jQuery變量和對象緩存

Question

這是一直在困擾我一段時間，每次我發現自己使用不同的解決方案。

因此，我點擊了我的文檔中的鏈接創建一些ID爲新的元素。

<a href="#" id="test-link">Link</a> 

爲了更容易地再利用的目的，我想的是新的元素ID存儲在一個變量，它是jQuery對象

var test = $('#test'); 

在用戶點擊我追加，關於身體新元件，新的元素是DIV

$('body').append('<div id="test"/>'); 

而且這裏去的主要「問題」 - 如果我測試這個新的元素長度test.length它第一次返回0，後來1。但是，當我用$（'＃test'）。長度進行測試時，它從一開始就返回1。

我想這是一些緩存機制，我想知道是否有更好的全面解決方案，它將允許將元素存儲在變量中以便稍後重新調整用途，並且同時使用動態創建的元素。

住，代表，別的？我有時做的是創建字符串並將其添加到jQuery對象，但我認爲這只是避免了真正的問題。另外，在另一個jQuery對象中使用.find（）。

在此先感謝。

Answer 1

當您創建查詢時，您正在將變量的查詢存儲在變量中。這不是一個實時查詢。所以當組件被添加時，查詢不會被更新。

舉一個簡單的修復試試這個

function getTest(){ 
    return $('#test'); 
} 

現在使用getTest（），而不是測試

Answer 2

我認爲有幾個問題在這裏。如果這不是腳本中事件的順序，請糾正我。

首先，查詢被用於具有ID測試

// gets 0 elements, and it will not update since it's not a live object. 
var test = $("#test"); 

第二元件製成，具有ID測試一個新的div創建並插入到文檔中。

$('body').append('<div id="test"/>'); 

在這種情況下，變量測試不會更新，仍然有0個元素。

---

相反，您可以創建並緩存動態創建的元素，甚至在將它們插入到文檔之前。

// Caching the object, though it has not been inserted into the document yet. 
var test = $("<div id='test'></div>"); 

// Append the cached object to body on some click event 
$("body").append(test); 

// Make some changes to the div directly without using the cached variable. 
$("#test").text("wazza!"); 

// Let's see if the cached variable has an updated value. 
alert(test.text()); // alerts "wazza!"