首页 > 解决方案 > 页面重新加载时未命中更改功能

问题描述

我有一个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 文件包含在父视图中,每次下拉列表更改时都应该点击它?或者我在这里缺少什么?

标签: javascriptc#jqueryasp.net-core.net-core

解决方案


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

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

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

......

推荐阅读