5

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

我希望这是有道理的！

4

6 回答 6

12

您可以执行以下操作：

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

在此处查看有关 DOMNodeInserted 的更多信息

于 2013-09-24T11:13:10.473 回答
5

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


});
于 2013-09-24T11:32:21.130 回答
2

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

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

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

关于您的代码段：您可以侦听这样的 DOM 更新 $(".newly_created_element").bind(DOMSubtreeModified, function() { this.addClass('class'); });

于 2013-09-24T11:19:48.493 回答
1

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

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

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

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

如果您不关心支持 Internet Explorer 并且它的怪癖，您肯定会查看已弃用的突变事件，或者它们的替代品MutationObserver。这里还有一个使用 mutators 得到很好回答的 SO 问题：Is there a JavaScript/jQuery DOM change listener？

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

于 2013-09-24T11:55:04.723 回答
0

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

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

于 2013-09-24T11:25:53.523 回答
-3

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

var interval=setInterval(function(){ 
    if($('._icon').children().hasClass('_share')){
      clearInterval(interval);
    }else $('._icon').children().addClass('_share');
}, 1000);
于 2014-12-22T12:45:26.727 回答