使用 jQuery 在动态创建的元素上调用自定义函数 [重复]

Question

我有一个必须为某个类的所有元素调用的外部函数，如下所示：

jQuery('.myClass').myFunction();

这可行，但我怎样才能使动态创建的元素发生这种情况。我有多个可以创建元素的函数，我不想在每段创建新元素的代码中添加这一行。

这样做的原因是我根据我在 php 中使用的元素来加载 javascript。因此，我不能将 myFunction() 添加到元素创建函数中，因为这两个函数位于不同的文件中，这些文件可能会或可能不会一起加载到同一页面上。

那么，一旦创建了带有“.myClass”的对象，我如何调用.myFunction() 函数。

所以在创建元素的函数中，我不知道需要在元素上调用哪些函数，而在对元素执行函数的文件中，我不知道哪些函数创建了元素。

解决方案： 由于这被标记为重复问题，我无法添加答案。但是，我确实采取了与那个问题不同的方法来解决这个问题。我的方法是创建一个新类，其中每个脚本都可以添加创建元素时应该调用的函数，并在创建新元素时调用这些函数。

Js：

function jsHandler(){
    this.actions = [];

    this.addAction = function(action){
        this.actions.push(action);
        action();
    };

    this.callActions = function(){
        jQuery.each(this.actions,function(key,action){
            action();
        });
    };
}
var myJsHandler = new jsHandler;//global variable

然后在每个必须对对象调用函数的文件中，我放这个：

myJsHandler.addAction(function(){
    jQuery('.myClass').myFuncion();
});

在创建元素的每个文件中，我在创建元素后都放了这个：

myJsHandler.callActions();

对我来说这是可行的。一些注意事项：

• 我可能需要添加一些代码，以便始终在加载其他脚本之前创建 jsHandler。
• 请注意，每次创建元素时，此函数都会调用所有函数。对于我的功能，这无关紧要。

Answer 1

<div class="root">
  <span class="line"></span>
</div>


jQuery(document).on('DOMNodeInserted','.line',function(){
     jQuery(this).myFunction();
     console.log("object added");})
jQuery(".root").append(jQuery("<span/>").addClass("line"))

了解详情和突变事件列表this链接