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

【问题标题】：Adding custom CSS classes to dynamically-created elements with jQuery使用 jQuery 向动态创建的元素添加自定义 CSS 类
【发布时间】：2013-09-29 13:38:59
【问题描述】：

让我来说明我的问题：我有一个外部 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";
    }
});

我希望这是有道理的！

【问题讨论】：

发布代码示例/有关当前工作原理的更多详细信息？
如果第三方库不提供任何自定义事件，那就很难了
一个好的 API 允许您定义一个回调函数，例如在每个元素创建后调用该函数。
您可以在mutation events 获得战利品，但 IE 不支持 IE
也许这行得通。 $("element-root").bind(DOMSubtreeModified,"CustomHandler");在这里找到stackoverflow.com/questions/9488653/…

标签： javascript jquery html css dom

【解决方案1】：

你可以这样做：

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

查看更多关于 DOMNodeInserted here

【讨论】：

有用的建议，谢谢！我只关心 IE 支持和琐事，以及可能的效率……+1
上述事件DOMNodeInserted 现已弃用。

【解决方案2】：

当然，您也可以使用库使用的包装类或 id。只需将 css 样式添加到该包装器即可。我从来没有找到一个库无法连接到它的包装类/ID 定义。

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

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

关于你的 sn-p：你可以像这样监听 DOM 更新 $(".newly_created_element").bind(DOMSubtreeModified, function() { this.addClass('class'); });

【讨论】：

你是对的，有一个包装器，但为了增加烦恼，我试图将 Twitter's Bootstrap CSS classes 添加到动态添加的按钮中，我不想复制 /将该样式信息也粘贴到包装器中。关于外部脚本，它是我编写的，但在我的组织内通过 CDN 广泛使用并且无法修改。相信我想要突破极限......不过，有用的建议，谢谢！
Outch，我明白你的问题.. 一个艰难的。我的下一个猜测是用户交互。代码更新是否始终由用户交互启动？还是按固定时间间隔？您可能会接受并评估类（例如 $('trigger').on('click', function($('.newly_created_element').addClass('bootstrap classes')))};
总是通过用户交互，但很难说元素是什么时候真正添加到 DOM 中的，因此我现在头发稀疏... ;)
最后一次尝试：使用 less/sass mixins 将您的类扩展为使用 Less/Sass 的引导类。例如（更少）：.newly_created_element { .btn; .btn-大； }。祝你好运

【解决方案3】：

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

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

【讨论】：

感谢 Ivan，再次提供全面的有用建议，但我如何在不编辑外部脚本文件的情况下触发我创建的任何事件？
哦，对不起。当我阅读你的问题时，我没有专心。 :( 在你的情况下，DOM 突变事件是正确的解决方案。updates.html5rocks.com/2012/02/…

【解决方案4】：

您好，我做了一个 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');
    });


});

【讨论】：

感谢您为这个 kasper 提供了一个小提琴，虽然当 IE 不确定它的能力时我仍然有点犹豫是否使用突变事件......好建议！
有一个 jquery 插件可以帮助你。看看这里：stackoverflow.com/questions/3900151/… 但是我不知道插件是如何工作的：-/
插件似乎不再可用，但它似乎也只在 jQuery 事件上触发......如果它还在附近就不错了:(

【解决方案5】：

为了彻底并为我的问题提供明确的解决方案，我的结论如下。谢谢大家的想法和建议，我学到了很多东西，显然让人们思考了！

最初我希望有一个我可能忽略的神奇的 jQuery 函数，类似于：

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

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

如果您不关心支持 Internet Explorer 并且它的怪癖，您肯定可以查看deprecated mutation events，或者他们的替代品MutationObserver。这也是一个使用 mutators 得到很好回答的 SO 问题：Is there a JavaScript/jQuery DOM change listener?

简而言之，在这篇文章中，没有内置的 jQuery 函数来监控 DOM 变化，在我的例子中，我的问题可以通过更好的代码设计来解决。谢谢大家的回答，让我们继续挑战极限！

【讨论】：

【解决方案6】：

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

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

【讨论】：