页面重新加载时未命中更改功能答案

【问题标题】：Change function not being hit on page reload页面重新加载时未命中更改功能
【发布时间】：2021-06-02 00:33:11
【问题描述】：

我有一个cshtml 视图，它在头部声明了一个 js 文档，在正文中加载了一个部分

<head>
    <script src="~/js/Project/doc.js"></script>
</head>

和部分

<div class="panel" id="panelDoc">
    <partial name="_docInformation" model=Model.Doc />
</div>

这个部分加载了一个包含各种表格和下拉列表的部分视图。 doc.js 具有以下功能，可以根据用户选择的文档类型再次获取页面上的信息，将panelDoc 中的html替换为新信息的部分：

$(document).ready(function () {

    $('#docType').change(function () {
        debugger;
        // Get the selected document type from the dropdown via ID
        var docType = $('#docType option:selected').val();

        var form = {
            ProjectID: $('#ProjectID').val(),
            DocType: docType
        };

        $.ajax({
            url:  '/Project/LoadDocumentPartial',
            type: 'POST',
            data: form,
            success: function (result) {
                if (result.success != undefined && !result.success) {
                    // Show error stuff
                }
                else {
                    // Replace the current html in id with new html
                    $('#panelDoc').html(result);
                }
            }
        });
    });
});

这在第一次加载部分时有效，因为我可以更改下拉菜单并点击此功能，用新信息替换内容。但是，如果我再次更改下拉菜单，它永远不会点击此功能。

据我了解，我们将 js 文件包含在父视图中，每次下拉列表更改时都应该点击它？还是我在这里遗漏了什么？

【问题讨论】：

标签： javascript c# jquery asp.net-core .net-core

【解决方案1】：

尝试对顶部的 javascript 函数使用不同的语法：

 
 $(document).on("change", "#docType", (function (e) {

  e.preventDefault();
  e.stopImmediatePropagation();

......

【讨论】：

似乎有效。原版没有的任何原因？
当我使用带有 ajax 的局部视图时，我总是使用这种语法。另一个也从来没有为我工作过。当您重新加载部分视图时，以前的事件绑定会丢失。所以你必须将事件绑定到文档。