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').length 它从一开始就返回 1。

我想这是某种缓存机制，我想知道是否有更好的、全面的解决方案，它允许在开始时将元素存储在变量中以供以后重新利用，同时使用动态创建的元素。

直播，委托(delegate)，还有别的吗？我有时做的是创建字符串并将其添加到 jQuery 对象，但我认为这只是避免真正的问题。另外，在另一个 jQuery 对象中使用 .find()。

提前致谢。

Answer 1

我认为这里有几个问题。如果这不是您脚本中的事件顺序，请纠正我。

首先，对具有 id test 的元素进行查询

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

其次，创建一个 id 为 test 的新 div 并将其插入到文档中。

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

在这种情况下变量 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!"