添加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");
}