动态添加元素的JQuery选择器

Question

我无法弄清楚如何哄骗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()在元素进入时附加事件监听器.如果我想捕获点击事件或其他东西,那将是很棒的,但我没有; 我希望能够选择动态添加的元素.

Answer 1

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

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

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