jqueryui 弹出窗口打开和关闭后更改事件停止触发

Question

这是简短的 TL;DR 版本：

我有一个针对 select 列表的 onchange 事件停止触发

如果该元素位于从部分视图填充的 jqueryui 弹出窗口中，则针对元素 ID 使用 JQuery 是否存在任何问题，即 $("#Customer_ID").change .除此之外，我还有两个不同的弹出窗口，它们由共享相同 $("#Customer_ID").change javascript

的不同部分视图填充

我有一个包含两个 div 的页面，用于 jquery ui 弹出窗口

当我在 jqgrid 中点击一个单元格时，我会弹出相应的对话框（编辑或新建）

弹出窗口依次由来自控制器的部分视图填充

这个很好用

我在这些弹出窗口中有三级级联下拉菜单。大多数时候他们工作正常。在打开和关闭弹出窗口几次后，动态下拉菜单停止工作

此时动态下拉 jscript 加载正常，但似乎未触发更改事件。

我怀疑是因为我有两个具有相同名称控件的弹出窗口？

总之这里是一些删节的代码片段

_Layout.cshtml

引用了附加所有 JQueryui 内容的 js

<!-- Logic to setup edit,new,delete popups -->
<script src="~/Scripts/Layout.js" type="text/javascript"></script>

Layout.js

包含设置编辑弹出窗口和其他一些东西的代码。这只是创建弹出窗口的部分：

        $("#dialog-create").dialog({
            title: 'New',
            autoOpen: false,
            resizable: true,
            width: 800,
            height: 440, // this allows the dialog to correctly estimate the middle of the viewport
            show: { effect: 'fade', duration: 100 },
            modal: true,
            open: function (event, ui) {
                if (urlNew) $(this).load(urlNew);
            },
        });

TasksWeeklyClient.cshtml

这实际上有一个 jqGrid。单击弹出单元格，例如创建弹出窗口。

<!-- edit, new, delete popups -->
<div id="dialog-edit" style="display: none; z-index: 2000;">
</div>

<div id="dialog-create" style="display: none; z-index: 2001;">
</div>

Create.cshtml

这是由 returns 部分视图的控制器提供的。这就是问题的开始。 Customer_ID 下拉菜单级联到 CustomerProject_ID 下拉菜单。关闭并打开几次后，它会停止工作。这也有对 TasksDialogs.js 的引用，其中包含所有级联下拉内容（级联下拉是此处另一个问题的主题：

（此代码位于任务视图文件夹中）

<div class="form-group">
    @Html.LabelFor(model => model.Customer_ID, "Customer & Project", htmlAttributes: new { @class = "control-label col-md-6 text-md-left" })
    <div class="col-md-12">
        @Html.DropDownList("Customer_ID", null, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Customer_ID, "", new { @class = "text-danger" })
    </div>
    <div class="col-md-12">
        @Html.DropDownList("CustomerProject_ID", null, htmlAttributes: new { @class = "form-control" }) 
        @Html.ValidationMessageFor(model => model.CustomerProject_ID, "", new { @class = "text-danger" })
    </div>

TaskDialogs.js

终于有了这个脚本。通常这有效，但在打开和关闭几个弹出窗口后，CustomerID.change 不再出现在控制台中。

您可以看到我已经尝试了两种不同的方法来附加更改事件。两者表现出相同的症状。

$(document).ready(function () {
    console.log("TasksDialog.js ready");

    console.log($("#Customer_ID"));
    //When Customer is changed reload Project
    // Project function reloads project tasks
    $("#Customer_ID").on("change",
//    $("#Customer_ID").change(
        function () {
            console.log("CustomerID.change");
            // refresh projects
            refreshProjectFromClient();
        }
        );

我不知道我需要 post 控制器代码。那部分一切正常。

Answer 1

在管理我使用的动态下拉列表的 javascript 中

$("#Customer_ID")

引用两个不同对话框中的字段。

原来我需要使用这些来专门指代我想要的字段：

$(div#dialog-create #Customer_ID")

$(div#dialog-edit #Customer_ID")

我认为可能出于同样的原因未正确附加更改事件。现在我通过将更改硬编码到 cshtml 视图中的控件中来绕过它，如下所示：

@Html.DropDownList("Customer_ID", null, 
htmlAttributes: 
new { 
@class = "form-control", 
@onchange= "refreshProjectFromClient()" 
})

jqueryui 弹出窗口打开和关闭后更改事件停止触发

change event stops firing after jqueryui popups opened and closed

jquery-ui-dialog

jquery-2.0

asp.net-mvc-5.2

free-jqgrid