Question

在jQuery中，您可以使用.live()，.on()和.delegate()将事件绑定到页面上尚未添加的DOM元素。

是否可以使用类似的技术来选择尚未添加的DOM元素以应用某些功能？

例如，我想选择所有具有类.req的输入元素，并包含一个名为“Required”的水印。

我已经使用jquery插件来做水印，但无法对动态添加到页面的DOM元素起作用。

Answer 1

您可以使用mutation events（DOMNodeInserted），但不推荐使用它们因此，除非您想要每隔X次使用它们或拉动DOM，答案是否

拉道：

setInterval(function(){
    // Do what you want here.
    $('.req').watermark("Required");
}, 500); // evey half a second.

Answer 2

不幸的是，没有。事件委托仅起作用，因为您在技术上绑定到已存在的DOM节点，因此最终触发事件的元素尚不存在并不重要。路上有DOM级别的2个事件（并且已经在某些浏览器中实现），它们可以让您对正在创建的新DOM节点或正在操作的现有DOM节点做出反应，但在浏览器支持更好之前，实际上没有任何选项除了为新节点重复轮询DOM之外，这是非常低效的。

Answer 3

答案是，这取决于您如何将元素插入DOM。如果您通过jQuery插入它们，那么您可以使用livequery之类的插件。正如你所能see一样，它可以与核心操作方法挂钩，只要它们被调用，它就会运行在实时查询中注册的回调。如果您通过vanilla JS插入元素，那么就像其他人所说的那样，DOM muatation事件已被弃用且不可靠，因此轮询将是您的最佳选择。

Answer 4

我知道这篇文章已经过时但我相信这可以使用jQuery find方法完成。

http://jsfiddle.net/vreTG/1/

// Generate some dynamic content
var dyn = '<ul>';
dyn += '<li class="req">Name</li>';
dyn += '<li class="req">Address</li>';
dyn += '<li class="opt">Phone Number</li>';
dyn += '<ul>';

// Add to DOM
$("#container").html(dyn);

// Find required fields
$("#container").find(".req")
    .prepend("* ")
    .css("color", "#900");

在jQuery中选择DOM元素 - 动态添加

4 个答案: