0

通过单击事件，我将具有自定义属性的元素注入
<div class="added" myValue="hello"></div>到 DOM。

我写了一个通用函数：

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

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

更新问题：

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

4

4 回答 4

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

您必须each在注入元素后调用，或使用委托事件，如on选择器。

于 2013-01-08T21:56:02.747 回答
3

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

因此，只需在将元素添加到 DOM后$.each()调用该函数。

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

于 2013-01-08T21:56:10.320 回答
1

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

$("#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中搜索新元素。

于 2013-01-08T21:59:06.950 回答
0

您不能id在多个元素上使用相同的属性。您每次都需要不同的 ID。ID 选择器#只会选择所有这些元素中的第一个，这就是它看起来没有循环的原因。

尽管您确实应该更改其他元素的 id，但这实际上仍然有效：

$("[id=added]").each(...
于 2013-01-08T21:56:16.413 回答