防止元素更新--JQuery

Question

我选择了一个页面元素：

$mainSection = $('#main');

然后我通过AJAX将更多元素添加到<div id="main"></div>元素中。下次我调用$mainSection时，新添加的元素也在其中。但我不希望这样。我希望变量$mainSection仅包含页面初始呈现中的内容。我找不到阻止jQuery更新的方法。

---

我试过了：

$(document).ready(function(){
  $mainSection = $('#main').clone(true);

然后我将新元素添加到#main，然后检查它们是否通过以下方式找到：

$foundElement = $($mainSection + ":not(:has(*)):not(script):contains('"+newlyAddedContent+"')");

在页面加载时，它们不在那里。但是在我添加它们之后，它们就被发现了。

我也尝试过：

$mainSection = $('#main').html();
$mainSection = $($mainSection);

也不起作用。

---

这是一个jsFiddle来说明我的观点：

http://jsfiddle.net/VEQ2E/2/

---

这个问题在这个方面埋葬了：                $ foundElement = $（$ mainSection +“：not（：has（*））：not（script）：contains（'”+ newlyAddedContent +“'）”）;

当我这样做的时候，总会在整个文档中进行搜索。

Answer 1

您可以使用.clone(true)：

$mainSection = $('#main').clone(true);

每次都取这个div的初始状态的clone/copy。

注意：的

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

withDataAndEvents：Boolean（默认值：false）

deepWithDataAndEvents：Boolean（默认值：withDataAndEvents的值）

一个布尔值，指示是否应复制克隆元素的所有子项的事件处理程序和数据。

Answer 2

您可以采取以下几种方法：

在更新之前缓存#main的内容。这为您提供了没有元素的元素的内容。：

mainsectionContents = $('#main').html();

或者在更新之前缓存#main的副本。这将为您提供内容和元素，并根据您可能想要复制的任何内容随时查看api docs：

$mainsectionCopy = $('#main').clone();

Answer 3

你的问题不是你的克隆被改变了，而是你用来尝试在克隆中找到东西的选择器。你的代码是这样的：

$($mainSection + ":not(:has(*)):not(script):contains('"+newlyAddedContent+"')");

将对象与字符串连接会将对象转换为字符串，只需"[object Object]"，然后您的选择器只会查看":not(:has..."

相反，您应该使用过滤器：

$foundElement = $mainClone.filter(":not(:has(*)):not(script):contains('world')");

现在只会在$mainClone内查找与该过滤条件相匹配的商品。

JSFiddle