0

这是简短的 TL;DR 版本：

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

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

我有一个页面有两个 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>

布局.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>

任务对话框.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();
        }
        );

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

4

1 回答 1

0

在管理我正在使用的动态下拉列表的 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()" 
})
于 2017-01-18T11:17:58.680 回答