Jquery：选择新添加的 DOM 节点的最佳方法是什么？答案

【问题标题】：Jquery: What is the best way to select the newly added DOM node?Jquery：选择新添加的 DOM 节点的最佳方法是什么？
【发布时间】：2015-09-29 08:06:12
【问题描述】：

我有一个外部模板文件，其结构在单击按钮时会动态添加到表中。当以这种方式添加新的表格行时，我需要对这段新添加的代码调用回调。

我想知道，选择这个新代码的最佳方法是什么。它有一个 ID，所以写一些其他选择器不会有问题，但我想知道是否有一种更简单快捷的方法来选择它。

这是一段代码：

$rightSpot.append(app.renderTemplate('temp/product', tplData ));

编辑：这对我有用，但也许有更好的方法：

$newProduct = $rightSpot.find('tr').last().find('textarea');

【问题讨论】：

您的意思可能是“选择新添加的 DOM 节点”。
你用的是什么模板库？
您也可以编辑问题的标题，以更好地反映常用术语。

标签： javascript jquery performance append selector

【解决方案1】：

我会考虑使用 react.js。使用 react 的优点是它可以与虚拟 DOM 一起使用，因此在回调可用之前您将不会依赖物理 DOM 来呈现。

http://facebook.github.io/react/

【讨论】：

听起来不错，但不能切换到 react.js，因为我不是决定它的人。 ://

【解决方案2】：

我不知道这是否是最好的方法，但你可以这样做 -

$("#giveitafriend").click(function() {
  $("#ab").append($("<span>")
    .text("I'm here too!")
    .css("color", "red")
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ab">
  <span>On My  Own</span>
</div>
<button id="giveitafriend">Give it a Friend</button>

【讨论】：

【解决方案3】：

假设您的 renderTemplate 函数返回 HTML 元素，可能您可以按如下方式访问新元素

var newElement = app.renderTemplate('temp/product', tplData ); 
$rightSpot.append(newElement);
console.log($(newElement).attr('id'));

【讨论】：

如果 app.renderTemplate 返回 HTML 而不是 jQuery 对象，您可能需要 $(newElement).attr('id')。
感谢@JohnC 发现错别字