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

Call custom function on dynamically created elements with jQuery

本文关键字：元素 调用 自定义函数 创建 jQuery 动态 使用      更新时间：2023-09-26

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

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。
  • 请注意，每次创建元素时，此函数都会调用所有函数。对于我的函数来说，这并不重要。
<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"))

有关详细信息和突变事件，请列出此链接

相关文章：