Question

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

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

这是有效的，但是如何才能为动态创建的元素实现这一点。我有多个可以创建元素的函数，我不想在创建新元素的每一段代码中添加这一行。

这个的原因是我根据我使用php的元素加载javascript。因此，我无法将myFunction（）添加到元素create函数中，因为这两个函数都在不同的文件中，这些文件可能会也可能不会在同一页面上加载。

那么如何在创建一个带有'.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链接

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

1 个答案: