Question

通过点击事件，我注入了一个带有自定义属性的元素 <div class="added" myValue="hello"></div>到DOM。

我写了一个通用函数：

$('.added').each(function(){
    console.log( $(this).attr('myValue') );
});

不起作用。我以为$.each()可以处理动态元素？

更新问题：

我意识到使用.each()是错误的做法。但是，如果我不想将事件处理程序附加到元素，该怎么办。我只想自动对某个类名的任何元素执行操作，无论它们何时被添加到DOM中。似乎是一个常见的用例。

Answer 1

不，each不处理动态添加元素，它仅适用于jQuery对象创建（或修改）时存在于DOM中的元素。
.each函数没有任何意义，因为id在DOM中应该是唯一的。我建议阅读：jQuery id selector works only for the first element

注入元素后，您必须调用each，或者使用delegate event, like on选择器。

Answer 2

$.each()将在您调用此方法时循环遍历与您的选择器匹配的元素。因此，如果在动态地将元素添加到DOM之前调用此方法，则无法期望此方法将返回一些您可能在未来某个事件中假设添加到DOM的元素。

只需在之后调用$.each()函数，即可将元素添加到DOM中。

您的代码似乎也存在不一致之处。您正在使用ID选择器$('#added')，它只能返回单个元素。是的，ID必须在整个DOM中是唯一的。因此，除非你有一些破碎的HTML，否则在单个元素上调用.each()几乎没有任何意义。

Answer 3

当你的点击事件发生时，在那里做你的“事情”。

$("#someelemt").click(function(){
    var el = $("<div class='added' myValue='hello'></div>").appendTo("#someotherelement");
    console.log(el.attr("myValue")); // <--- something
});

ID必须是唯一的，所以我更改了添加到班级。

如果你想将两者分开，让你的点击事件触发一个事件，然后使用事件委托来监听它。

$("#someelemt").click(function(){
    var el = $("<div class='added' myValue='hello'></div>").appendTo("#someotherelement");
    el.trigger("added");
});
$(document).on("added","div",function(){
    console.log(this.getAttribute("myValue")); // <--- something
});

$.each不适用于将来的元素，只适用于代码执行时存在的元素。

更新问题更新
如果没有编写低效的代码，这是不可能的。它需要使用DOMMutationEvents，它可能效率低，折旧，并且在所有浏览器中都不受支持，或者您可以使用setInterval，这也是低效的，因为它会不断地在dom中搜索新元素。

Answer 4

您不能对多个元素使用相同的id属性。每次都需要不同的ID。 ID选择器#将仅选择所有这些元素的 first ，这就是为什么它似乎不是循环的。

虽然你真的应该改变其他元素的id，但这实际上仍然可以工作：

$("[id=added]").each(...

在创建动态元素时执行某些操作

4 个答案: