2

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

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

我想在我的

$(function() {});

有人知道这种可能性吗？

4

2 回答 2

3

As far as I'm aware there aren't any events that are fired when elements are added to the DOM, so there's nothing you can bind a handler to in order to check for this.

What you can do is set up a polling routine that will periodically check the DOM for elements that match your selector, compare the current number of matches against the previous value, and perform whatever actions you wish if they differ.

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

This all assumes that you're not controlling the creation of these elements, or at least aren't controlling them in a way that allows you to reliably know they've been created.

If the only source of these elements is a single function you've written then you could simply extend that to trigger a handler for a custom event bound in jQuery.

于 2012-04-18T13:09:30.197 回答
3

最实用的解决方案

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

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

看到它在行动。

兼容性和替代品

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

  1. 该DOMNodeInserted事件已弃用。
  2. 它不适用于 IE < 9，并且无法使其工作。

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

对于 IE 兼容性，可悲的事实是你不能直接做任何事情。但是，您可以诉诸冗长、可怕的 hack，通过修改 DOM 元素的原型来提供结果。请参阅为IE8 量身定制的示例。

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

  • 您需要找出所有可能导致 DOM 被修改的方法（或者至少是您将使用的所有方法）并将它们编织到解决方案中。将来，您将有义务检查是否添加了新的 DOM 变异方法并跟上对它们的支持。
  • 对于您选择以此为目标的所有浏览器（如果不止一个），您需要格外小心地为方法提供正确的替换。
  • 扩展 DOM（通常）可能会有问题。如果您认为这种特定的扩展方法不好，请考虑 IE7 不支持它，并且在该浏览器上，您必须替换DOM 中所有元素的方法，以确保您挂钩所有可能的修改。
  • 具体来说，您不能仅使用此代码定位所有当前浏览器（例如，Chrome 将这些方法定义为 on Node.prototype，而不是 on Element.prototype）。即使是在开玩笑，也不应该提及针对未来的浏览器。

最后，您始终可以决定使用轮询来检测更改，正如 Anthony 在他的回答中所解释的那样。

相关资源

于 2012-04-18T13:22:08.423 回答