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

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的更多信息

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

为了彻底并为我的问题提供清晰的解决方案，我的结论如下。感谢大家的想法和建议，我学到了很多东西，并且清楚地引起了人们的思考！

最初我希望有一个神奇的 jQuery 函数，但我可能忽略了它，大致如下：

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

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

如果您不关心支持 Internet Explorer 及其怪癖，您绝对可以查看已弃用的突变事件，或者它们的替代品MutationObserver。这里还有一个使用变异器的正确回答的问题：Is there a JavaScript/jQuery DOMchangelistener?

简而言之，截至本文为止，还没有内置的 jQuery 函数来监视 DOM 更改，就我而言，我的问题可以通过更好的代码设计来解决。感谢大家的回答，让我们继续挑战极限！