使用jQuery将自定义CSS类添加到动态创建的元素中 [英] Adding custom CSS classes to dynamically-created elements with jQuery

问题描述

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

这是否优雅？如果是这样，怎么样？如果不是，这可能是实施设计不良的副作用？

我曾经考虑过监控DOM以查看何时更新，并添加类对于这些新的元素，但这似乎很麻烦，也许是不必要的。

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

编辑：

根据要求，这里是一个简单的例子，代码示例：

  //外部库中的函数，假设无法编辑！ 
函数addElement（）{
 $（'body'）。append（$（'< div class =new_created_element>< / div>'））; 
} 
 
 //我的代码，希望从上面的外部函数添加新名称
 //的类名... 
 //伪编码，因为我不知道该怎么做！ 
 $（function（）{
 when（new element added）{
 add classmy_own_class; 
} 
}）; 
  

我希望这是有道理的！

解决方案

为了彻底，清楚地解决我的问题，我的结论。感谢大家的想法和建议，我已经学到了很多，并且清楚地让人想到了！

最初我希望有一个神奇的jQuery功能，忽略了一些这样的东西：

  $（＃parent-element）monitorDom（function（added_element） ..}）; 
  

...但是没有什么，这可能是一件好事，因为我怀疑我我们陷入糟糕的代码设计，允许钩子和回调是更好的方法。也就是说，使用较小，建立和测试的构建块，而不是尝试过度设计某些东西。

如果您不关心支持Internet Explorer及其怪癖，可以肯定地看看已弃用的突变事件，或者替换 MutationObserver 。这里也是使用mutator的一个正式回答的SO问题：是否有JavaScript / jQuery DOM更改侦听器？

简而言之，就是在这篇文章中，没有内置的jQuery函数来监视DOM的变化，在我的我的问题可以用更好的代码设计解决。感谢大家的所有答案，让我们继续推动极限！

Let me illustrate my question: I have an external JavaScript library that creates certain HTML elements for me dynamically based on user input and interaction, and I'm looking to write a script that would automatically add a certain class to these dynamically created elements. Assume that I also am unable to edit the external JavaScript library I'm using.

Is this elegantly possible? If so, how? If not, could this be a side-effect of poor implementation design?

I've thought about somehow monitoring the DOM to see when it was updated, and adding the classes to these new elements then, but this seems cumbersome and possibly unnecessary.

Thanks in advance for any thoughts / solutions!

Edit:

As requested, here's a simplified example of what I'm trying to accomplish with a code sample:

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

I hope this makes sense!

解决方案

For the sake of thoroughness and bringing a clear solution to my question to light, herewith my conclusion. Thank you all for your thoughts and suggestions, I've learnt a lot and clearly got people thinking!

Initially I was hoping for a magical jQuery function that I'd perhaps overlooked, something along the lines of:

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

...but there just isn't anything, which is probably a good thing because I suspect I've stumbled onto poor code design, and allowing for hooks and callbacks is a better way to go. I.e.: use the smaller, established and tested building blocks instead of trying to over-engineer something.

If you don't care about supporting Internet Explorer and it's quirks, you may definitely look at the deprecated mutation events, or their replacement the MutationObserver. Here is also a decently answered SO question with the use of mutators: Is there a JavaScript/jQuery DOM change listener?

In a nutshell, as of this post, there is no built-in jQuery function to monitor DOM changes, and in my case my problem can be resolved with better code design. Thank you all for all the answers, and let's keep pushing the limits!

这篇关于使用jQuery将自定义CSS类添加到动态创建的元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！