在jqueryui弹出窗口打开和关闭后，change事件停止激发

Question

这是简短的TL；DR版本：

我有一个针对停止启动的选择列表的onchange事件

如果元素id(即$("#Customer_ID").change)在从局部视图填充的jqueryui弹出窗口中，则对该元素使用JQuery是否存在问题。除此之外，我还有两个不同的弹出窗口，由共享相同$("#Customer_ID").changejavascript 的不同局部视图填充

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

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

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

这很好

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

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

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

无论如何，这里有一些简化的代码片段

_Layout.cshtml

有一个对js的引用，它附加了所有JQueryui内容

<!-- 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，它具有所有级联下拉内容(级联下拉是这里另一个问题的主题：级联下拉重复填充

(此代码位于任务视图文件夹中)

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

我不知道我需要发布控制器代码。那部分都很好。

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