Question

我想为将要创建的与JQuery选择器匹配的所有标记创建等效的onCreate事件。

例如，让我们考虑一个文档，其中$("#foo > .bar > ul > li")的结果是空集。我有一个名为fooBar的函数，我想在创建匹配$("#foo > .bar > ul > li")的标记时调用此函数。

我想在我的

中定义此事件

$(function() {});

有人知道这种可能性吗？

Answer 1

据我所知，当元素添加到DOM时，没有任何事件被触发，所以没有什么可以绑定处理程序来检查这一点。

您可以做的是设置一个轮询例程，该例程将定期检查DOM以查找与您的选择器匹配的元素，将当前匹配数与之前的值进行比较，并执行您希望的任何操作（如果它们不同）。

var matchedElements = 0;

function poll() {
    var $elements = $("#foo > .bar > ul > li");
    if($elements.length > matchedElements) {
        fooBar();
    }
    matchedElements = $elements.length;
}

setInterval(poll, 500); // runs poll() every half a second

这一切都假设您没有控制这些元素的创建，或者至少没有以一种允许您可靠地知道它们已被创建的方式控制它们。

如果这些元素的唯一来源是您编写的单个函数，那么您可以简单地扩展它以触发jQuery中绑定的自定义事件的处理程序。

Answer 2

最实用的解决方案

您可以访问document上的DOMNodeInserted事件以检测更改，并使用.is检查它们是否与您选择的选择器匹配。

$(function() {
    var selector = "whatever";
    $(document).on('DOMNodeInserted', function(e) {
        if ($(e.srcElement || e.target).is(selector)) {
            alert("Matching element inserted!");
        }
    });
});

<强> See it in action

兼容性和替代品

这种方法很方便，但确实有两个缺点：

不推荐使用DOMNodeInserted事件。
它不适用于IE＆lt; 9，并且不能使其工作。

关于第一个，我不认为这是一个问题。它可能已被弃用，但只要没有其他选择，我真的不认为任何浏览器供应商会提取此功能。也许在五年左右这将成为一个实际问题，但由于代码总共10行左右，因此更新它以使用最新标准肯定会很容易。

对于IE兼容性，可悲的事实是你不能直接做任何事情。但是，您可以采用通过修改DOM元素原型来提供结果的冗长，可怕的黑客攻击。请参阅example tailored to work on IE8。

可悲的是，这种方法存在多个问题：

您需要删除可导致DOM被修改的所有methods（或至少，您将使用的所有内容）并将它们编织到解决方案中。将来，您将不得不检查是否添加了新的DOM突变方法并跟上它们的支持。
您需要格外小心，为您选择以此为目标的所有浏览器（如果不止一个）提供正确的方法替换。
扩展DOM（一般而言）can be problematic。如果您认为这种特定的扩展方法不好，请考虑IE7不支持它，并且在该浏览器上您必须替换 DOM 中所有元素的方法，以确保您可以使用修改
具体而言，您无法仅使用此代码定位所有当前浏览器（例如，Chrome在Node.prototype上定义了这些方法，而不是Element.prototype）。即使开玩笑，也不应该提及定位未来的浏览器。

最后，你可以随时决定使用民意调查来检测变化，正如安东尼在答案中解释的那样。

是否有可能在创建某个标签时引发事件？

2 个答案:

最实用的解决方案

兼容性和替代品

相关资源