Question

让我来说明一下我的问题：我有一个外部JavaScript库，可以根据用户输入和交互动态为我创建某些HTML元素，我正在编写一个脚本，可以自动为这些动态创建的类添加某个类元素。假设我也无法编辑我正在使用的外部JavaScript库。

这可以优雅吗？如果是这样，怎么样？如果没有，这可能是糟糕的实施设计的副作用吗？

我已经考虑过以某种方式监视DOM以查看它何时被更新，然后将这些类添加到这些新元素中，但这看起来很麻烦且可能没必要。

提前感谢任何想法/解决方案！

修改的

根据要求，这是一个简单的示例，说明我正在尝试使用代码示例：

// function in external library, assume it cannot be edited!
function addElement() {
    $('body').append($('<div class="newly_created_element"></div>'));
}

// my code, looking to add the class name to the newly-created elements
// from the external function above...
// pseudo-coded as I have no idea how to do this!
$(function(){
    when (new element added) {
        add class "my_own_class";
    }
});

我希望这是有道理的！

Answer 1

您可以执行以下操作：

$("body").bind("DOMNodeInserted", function() {
   $(this).find('.newly_created_element').addClass('my_own_class');
});

详情了解DOMNodeInserted here

Answer 2

嗨，我做了一个jsfiddle处理你的问题。单击按钮可模拟添加元素的外部库。与单击按钮无关我正在侦听DOMNodeInserted。如果在dom中插入了某些内容，则会添加一个类。您可以轻松地修改脚本以仅向某些元素添加类。

http://jsfiddle.net/kasperfish/AAd8f/

$(function() {
    $('#btn').click(function(){
        $('body').append('<div style="width:30px;height:30px;border:1px solid black"></div>');
    });


    $(document).on('DOMNodeInserted', function(e) {

        $(e.target).addClass('blue');
    });


});

Answer 3

肯定有一个库使用的包装类或id也可以使用。只需将CSS样式添加到该包装器即可。我从来没有找到一个库，我无法挂钩它的包装类/ id定义。

如果失败，您需要对该脚本所做的更改采取行动。可能通过向特定用户交互添加侦听器，或者像您提到的那样，添加DOM更新。也许你可以在外部脚本本身上添加一个监听器或回调。

如果我对特定外部脚本有更多了解，我可以给出更准确的答案。

关于你的代码段：你可以听这样的DOM更新 $（“。newly_created_element”）。bind（DOMSubtreeModified，function（）{this.addClass（'class'）;}）;

Answer 4

如果我是你，我会使用事件。 jQuery让它变得简单。以下是来自Google的前三个链接：http://www.sitepoint.com/jquery-custom-events/，https://stackoverflow.com/a/14840483/993216，http://api.jquery.com/trigger/。

在一个模块中，您可以从服务器加载数据，也许处理它并触发事件。在另一个模块中，您可以听取该事件并做任何您需要的事情。在我看来，这是最好的方法。这是一种非常灵活的构建和应用程序方式，因为您可以添加其他模块。

Answer 5

为了彻底，并清楚地解决我的问题，我的结论就是这样。谢谢大家的意见和建议，我学到了很多，显然让人们在思考！

最初我希望有一个神奇的jQuery函数，我可能会忽略它，这有点像：

$("#parent-element").monitorDom(function(added_element){ ... });

...但是没有任何东西，这可能是一件好事，因为我怀疑我偶然发现了糟糕的代码设计，允许钩子和回调是更好的方法。即：使用较小的，已建立的和经过测试的构建块，而不是试图过度设计。

如果您不关心支持Internet Explorer及其怪癖，您肯定可以查看deprecated mutation events或替换MutationObserver。这里也是一个使用变异器的正确回答的问题：Is there a JavaScript/jQuery DOM change listener?

简而言之，截至本文，没有内置的jQuery函数来监视DOM更改，在我的情况下，我的问题可以通过更好的代码设计来解决。谢谢大家的所有答案，让我们继续推动极限！

Answer 6

这对我有用，我继续检查该类是否存在，一旦找到它，间隔函数就会停止

var interval=setInterval(function(){ 
    if($('._icon').children().hasClass('_share')){
      clearInterval(interval);
    }else $('._icon').children().addClass('_share');
}, 1000);

使用jQuery为动态创建的元素添加自定义CSS类

6 个答案: