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

Posted 2023-05-07

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

【英文标题】：Is there a way to run a function in a separate file when a div is added? [No jQuery]

【发布时间】：2017-03-17 20:42:36

【问题描述】：

我有 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.

【问题讨论】：

你不能在比声明之后直接调用foo()吗？顺便说一句，使用 innerHTML += 是 bad practice 并导致 DOM 被重新加载。

我知道它不受欢迎，但它比this容易写

【参考方案1】：

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

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

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

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

【讨论】：

第一种反向加载我的文件的方法工作正常，谢谢！

【参考方案2】：

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

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

function foo () 
 alert("foo");

【讨论】：

你不需要 jQuery。后者使用addEventListener。

我知道正如我在回答中所说的那样，如果他真的想在任何插入正文中的元素时保持警惕，我们可以像这样绑定事件。

没有 jQuery 你仍然可以做到这一点 :)

是的，你是对的，在纯 js 中实现这一点需要更多的代码。 :D