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

Question

我不知道如何引导 JQuery 选择一个在页面加载后动态插入到 DOM 中的元素(而不是绑定(bind)处理程序)。

例如:

如果我有 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() 附加事件监听器。如果我想捕获点击事件或其他事件，那就太棒了，但我没有；我希望能够选择动态添加的元素。

Answer 1

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

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

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