在使用 jquery .load() 加载的 html 范围内未定义全局函数

Question

我有 html ：

<script src="/js/app.js"></script>

在 app.js 我有函数 foo：

function foo() { console.log("foo") }

然后我有 jquery 并使用它的方法 .load 加载外部 html 内容：

$("#modal-wrapper").load("/modal_dialog_ajax", function () {
   // Some logic
});

/modal_dialog_ajax输出如下所示：

<div>Some markup</div>
<script type="text/javascript">
 foo();
</script>

Javascript 执行得很好，但在此 html 的范围内未定义foo()调用。

为什么Js里面的ajax加载的html内容看不到页面上定义的全局函数？

Answer 1

使用 window 全局对象解决了这个问题：

function foo() { console.log("foo") }
window.foo = foo;

然后将其称为

window.foo();

但不确定这是一个好习惯。