javascript - 将 MVC javascript 部分正确转换为纯 javascript 文件

Question

我有一个cshtml View 文件，其中包含按钮，单击该按钮将启动一个函数displayPopupWindow:

<button type="button" onClick="displayPopUpWindow(4);">Button Name</button>

最初，所有 JavaScript 代码都位于同一文件的 script 部分。 这样，一切都会按其应有的方式进行。

出于调试目的，我扩展了 LoadVersionedJavascriptFile 功能，因此我可以将整个脚本部分迁移到单独的 JavaScript 文件中。我这样做了，同时将整个脚本封装到 $(function(){...})

现在，当我单击按钮时，它会抛出函数未定义的错误。

function displayPopUpWindow(reportType) {
    //code
}

我的主要挑战是，即使我在第一个函数行或函数之前设置断点，函数也永远不会被访问，所以我无法获取任何数据，这可以帮助我找出原因。

谁能指出为什么迁移发生后该函数变得无法识别？

更新:

我已应用所有建议的更改，现在结构如下所示

在查看页面:

<div>
    //code
    <button type="button" id="btnDisplay" class="btn btn-primary">Display</button>
</div>

@section scripts {
    @Html.LoadVersionedJavascriptFile("~/Scripts/Reports/ExpiringUnits.js")
}

在 Javascript 文件上:

$(function() {
    $("btnDisplay").click(function () {
        displayPopUpWindow(4);
    });

    function displayPopUpWindow(reportType) {
        //code
    }
});

但是，它永远不会在 click 函数内遇到断点。我只能假设 reportType 值 4 未正确呈现。还有什么问题吗？

更新

忘记#了，感觉很蠢=P

Answer 1

如果函数在 document ready 内，它将无法从外部调用。

无论是在单独的 JavaScript 文件中还是在同一个文件中，脚本都没有关系。

不工作

<button type="button" onClick="displayPopUpWindow(4);">Button Name</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        function displayPopUpWindow(reportType) {
            alert("Button is clicked!");
        }
    });
</script>

如果您不想公开该功能，可以将点击事件附加到按钮上。

工作

<button id="btnDisplay" type="button">Button Name</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnDisplay").click(function () {
            alert("Button is clicked!");
        });
    });
</script>

另一个想法

如果您想将脚本保留在单独的文件中并且不更改大量现有代码，则不要使用文档准备，并将脚本文件呈现在页面底部。