Question

这是短TL; DR版本：

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

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

我有一个带有两个div的页面，用于jquery ui popups

当我点击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

这由返回局部视图的控制器提供。这就是问题的起点。 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();
        }
        );

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

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弹出窗口打开和关闭后停止触发

1 个答案: