局部视图上未定义 Javascript 函数

Question

我有这样的部分观点：

@model Blah.Blah.ThisModel

<script type="text/javascript">
    $.getScript("/Scripts/Pages/ReferralEdit.js");
    initReferralEdit();
</script>

@* blah blah rest of view here *@

然后在我的 ReferralEdit.js 外部文件中，我有以下内容：

console.log('external loading');

function initReferralEdit() {
    console.log('function is here');
}

当将此作为主路由（非 Ajax）加载时，它可以正常工作。通过 Ajax 加载时，在页面加载时检查控制台时，我得到以下信息：

Uncaught ReferenceError: initReferralEdit is not defined
external loading

所以，我知道文件正在加载，因为第一个 console.log() 可以正常触发，但该功能似乎不可用。

谁能解释为什么？ （以及，为什么错误会在external loading 输出之前出现在 Chrome 的日志中？）如何添加这些函数，以便它们“注册”或“在正确的范围内”或我遗漏的任何内容？

（我花了好几个小时试图找出如何在局部视图上加载 JS，但我总是卡在这些未定义的函数上......）

Answer 1

在尝试调用其中的任何方法之前，您需要确保文件已完全加载。试试下面的方法：

$.getScript( "/Scripts/Pages/ReferralEdit.js" )
  .done(function( script, textStatus ) {
     initReferralEdit();
  })
  .fail(function( jqxhr, settings, exception ) {
    console.log('failed to load script');
});