动态添加元素上的 JQuery 选择器答案

【问题标题】：JQuery Selector on Dynamically Added Element动态添加元素上的 JQuery 选择器
【发布时间】：2013-09-09 13:01:50
【问题描述】：

我不知道如何诱使 JQuery 选择在页面加载后动态插入到 DOM 中的元素（不是绑定处理程序）。

例如：

如果我有 HTML：

<div id="bar">
 World!
</div>

然后我创建一个新元素并将其插入 DOM：

var foo = '<div id="foo">Hello</div>';
$("#bar").before(foo);

我最终得到了这个：

<div id="foo">Hello</div>
<div id="bar">
 World!
</div>

稍后我可能想对插入的元素做一些不同的事情，使用 JQuery 来操作那个新元素。但如果我尝试这样做：

myHappyEl = $("#foo");

那么 myHappyEl 将是未定义的。 JQuery 看不到它，大概是因为它在 DOM 加载后附加了。

我已经看到很多解决可能相关但略有不同的问题的建议，其中解决方案是在元素出现时使用 .live()/.on() 附加事件侦听器。如果我想捕捉点击事件之类的，那就太好了，但我不这样做；我希望能够选择动态添加的元素。

【问题讨论】：

如何将引用推送到您创建和插入的每个元素的数组中？
似乎还可以jsfiddle.net/Z4xd4
“在 jQuery 完成监视这些事情之后” - 不，jQuery 根本不监视元素创建。当您将选择器传递给 $() 时，就像在 $("#foo") 示例中一样，jQuery 会查找当时匹配的元素。跨度>
确实，没关系。问题是 $("#bar").before(foo);正在由事件处理程序执行。因此，myHappyEl = $("#foo");在事件完全处理之前执行（因为数据库访问）。

【解决方案1】：

您必须在插入元素后分配该变量，如下所示：

var myHappyEl = $("#foo"); //Nothing, it isnt there
var foo = '<div id="foo">Hello</div>';
$("#bar").before($(foo));
myHappyEl = $("#foo");

否则页面上不存在该元素。

【讨论】：