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

【问题标题】：change event stops firing after jqueryui popups opened and closed在 jqueryui 弹出窗口打开和关闭后更改事件停止触发
【发布时间】：2017-01-18 19:17:58
【问题描述】：

这是简短的 TL;DR 版本：

我有一个针对停止触发的选择列表的 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>

创建.cshtml

这是由返回部分视图的控制器提供的。这就是问题开始的地方。 Customer_ID 下拉列表级联到 CustomerProject_ID 下拉列表。几次关闭和打开后，它停止工作。这也引用了TasksDialogs.js，其中包含所有级联下拉内容（级联下拉是此处另一个问题的主题：cascading drop downs repeatedly populated

（此代码可在任务视图文件夹中找到）

<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();
        }
        );

我不知道我需要发布控制器代码。这部分一切正常。

【问题讨论】：

标签： jquery-ui-dialog asp.net-mvc-5.2 free-jqgrid jquery-2.0

【解决方案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()" 
})

【讨论】：