使用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";
    }
});

我希望你能够理解这个！

- Chris Kempen

---

可以发布一段代码示例或更详细的说明，展示当前的工作方式？ - Paddy

如果第三方库没有提供任何自定义事件，那就比较困难了。 - Arun P Johny

一个好的API允许您定义回调函数，例如在每个元素创建后调用。 - Sebastian vom Meer

你可以查看变异事件，但IE < 9不支持。 - Arun P Johny

也许这个可以工作。$("element-root").bind(DOMSubtreeModified,"CustomHandler"); 在这里找到：https://dev59.com/o2kx5IYBdhLWcg3wCP2Y - Bernhard

IE浏览器的不稳定支持让我感到很不安，正如我在下面@Moeri的回答中所评论的，我希望错过了一个像$.magicallyMonitorThis(do_something());这样的jQuery函数：') 感谢您提供的有用建议和评论！ - Chris Kempen

Answer 1

你可以像这样做：

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

在 此处 查看更多关于DOMNodeInserted的内容。

- MaVRoSCy

---

有益的建议，谢谢！我只关心IE支持和小问题，可能还有效率... +1 - Chris Kempen

所述事件 DOMNodeInserted 现已弃用。 - Cedric

非常酷的方法！ - undefined

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');
    });


});

- kasper Taeymans

---

感谢Kasper提供了一个fiddle，虽然我仍然有些犹豫是否要在IE不确定其能力时使用mutation事件...好建议！ - Chris Kempen

有一个 jQuery 插件可能会对你有所帮助。在这里看一下：https://dev59.com/P2865IYBdhLWcg3wR8ah 然而我不知道这个插件是如何工作的 :-/ - kasper Taeymans

似乎插件已不再可用，但它似乎只在jQuery事件上触发...如果它仍然存在的话，那就不错了:( - Chris Kempen

Answer 3

当然，该库使用的包装类或ID应该也可以供您使用。只需将CSS样式添加到该包装器即可。我从未找到过无法挂钩其包装器类/ID定义的库。

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

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

关于您的片段： 您可以按此方式监听DOM更新 $(".newly_created_element").bind(DOMSubtreeModified, function() { this.addClass('class'); });

- hvgeertruy

---

你说得没错，确实有一个包装器，但更加烦人的是，我正在尝试将Twitter的Bootstrap CSS类添加到动态添加的按钮中，我不想把样式信息复制/粘贴到包装器中。至于外部脚本，它是我编写的，但在我的组织中广泛使用CDN，并且不能修改。信任我想要推动极限...非常感谢您提供的有益建议！ - Chris Kempen

哎呀，我理解你的问题了。这个有点难。我的下一个猜测是用户交互。代码更新总是由用户交互引发的吗？还是由定期时间间隔触发的？你可以注意这一点并评估类（例如：$（'trigger'）。on（'click'，function（$（'.newly_created_element'）.addClass（'bootstrap classes'））}）; - hvgeertruy

始终由用户交互触发，但很难确定元素实际添加到DOM的时间，因此我的头发正在变薄... ;) - Chris Kempen

最后一次尝试：使用Less/Sass mixins将您的类扩展到Bootstrap类。例如（在Less中）：.newly_created_element { .btn; .btn-large; }。祝好运。 - hvgeertruy

Answer 4

为了全面地呈现我的问题，并清晰地解决它，以下是我的结论。感谢大家的想法和建议，我学到了很多，也让人们开始思考！

起初我希望有一个神奇的jQuery函数，可能是我忽略了什么，类似于：

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

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

如果您不关心支持Internet Explorer及其怪癖，则可以查看已弃用的变异事件或其替代品MutationObserver。这里还有一个相当不错的SO问题，使用mutators：是否有JavaScript/jQuery DOM更改监听器？

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

- Chris Kempen

Answer 5

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

在一个模块中，您可以从服务器加载数据，可能对其进行处理并触发事件。在另一个模块中，您可以监听该事件并执行所需操作。在我看来，这是最好的方法。这是构建应用程序非常敏捷的方式，因为您可以添加其他模块。

- Ivan Demchenko

---

谢谢Ivan，再次提供有用的建议。但是如果我不编辑外部脚本文件，我该如何触发我创建的任何事件呢？ - Chris Kempen

哦，我很抱歉。当我阅读你的问题时，我不够专注。:( 对于你的情况来说，DOM突变事件肯定是正确的解决方案。http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers - Ivan Demchenko

Answer 6

这对我来说很有效，我一直在检查该类是否存在，一旦找到它，间隔函数就停止了

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

- manish