使用jQuery在动态创建的元素上调用自定义函数 [英] Call custom function on dynamically created elements with jQuery

问题描述

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

I have an external function which has to be called for all elements with a certain class, like this:

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

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

This works, but how can I make this happen for dynamically created elements. I have multiple functions which can create elements, and I don't want to add this line in every piece of code which creates a new element.

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

The reason for this is that i load javascript based on what elements i use with php. I therefore cant add myFunction() to the element create function, since both functions are in different files which might or might not be loaded together on the same page.

那么如何我可以在创建一个带有'.myClass'的对象上调用 .myFunction（）函数。

So how can I call the .myFunction() function on an object with '.myClass', as soon as it is created.

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

So in the function that creates the element, i don't know what functions need to be called on the element, and in the file that executes the function on the elements, i don't know which functions create an element.

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

Solution: Since this is marked as a duplicate question, i cannot add an answer. However, i did take a different approach to solve this than in that question. My approach was creating a new class where every script can add functions which should be called when creating an element, and calling a those functions when creating a new element.

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

然后进入每个必须通过对象调用函数的文件，我把它放在：

Then in each file which has to call a function over objects, i put this:

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

在每个创建元素的文件中，我在创建元素后放置它：

In every file which creates an element, i put this after creating the element:

myJsHandler.callActions();

对我来说这很有用。但是有一些注意事项：

For me this works. Some notes though:

• 我可能需要添加一些代码，以便在加载其他脚本之前始终创建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"))

详细信息和变异事件列表此链接

for details and Mutation events list this link

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