添加 div 时，有没有办法在单独的文件中运行函数？ [没有 jQuery]

Question

我有 2 个外部 js 文件，当document.body.innerHTML 添加一个元素时，我需要在 html 中调用一个函数。添加此 div 时，我想调用另一个文件中的一个函数。创建元素时如何调用函数？

//pseudo code
//first file:
document.body.innerHTML += "<div></div>"
//second file:
var foo = function() {
alert("foo");
}
//when div is added call foo.

Answer 1

如果代码按顺序执行，当您添加 div 时，函数 foo 尚未定义，因为它位于第二个文件中。您需要以相反的顺序加载文件，即首先加载第二个文件，然后加载第一个文件，以便在添加 div 时定义 foo 函数。然后你可以像调用任何其他函数一样调用它。

document.body.innerHTML += "<div></div>";
foo();

如果您无法更改文件加载的顺序，您可以在定义 foo() 后的第一个文件中执行代码，方法是将其置于超时状态：

setTimeout(function(){
    document.body.innerHTML += "<div></div>";
    foo();
}, 0);

Answer 2

我认为您需要使用 jquery 来监视身体以识别它：

$(document).on('DOMNodeInserted', function(e) {
    if (e.target.tagName == 'body') {
       console.log('something inserted')
       foo();
    }
});

function foo () {
 alert("foo");
}