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

Select DOM elements in jQuery - Dynamically Added

本文关键字：选择 DOM 元素 添加 jQuery 动态      更新时间：2023-09-26

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

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

例如，我想选择所有具有 .req 类并包含名为"必需"的水印的输入元素。

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

您可以使用突变事件（ DOMNodeInserted ），但它们已被弃用。
因此，除非您想使用它们或每隔 X 次拉取 DOM，否则答案是否定的

拉动方式：

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

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

答案是，这取决于如何将元素插入 DOM 中。如果你通过jQuery插入它们，那么你可以使用像livequery这样的插件。如您所见，它挂接到核心操作方法，每当调用它们时，它都会运行在实时查询上注册的回调。如果您通过香草JS插入元素，那么正如其他人所说，DOM互助事件已被弃用且不可靠，因此轮询将是您的最佳选择。

我知道

这篇文章很旧，但我相信这可以使用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");
相关文章：