Событие change прекращает работу после открытия и закрытия jqueryui

Question

Вот короткая версия TL;DR:

У меня есть событие onchange против списка выбора, который прекращает стрельбу

Есть ли проблемы с использованием JQuery против идентификатора элемента, т.е. $("#Customer_ID").change, если этот элемент находится во всплывающем окне jqueryui, которое заполняется частично. В дополнение к этому у меня есть два разных всплывающих окна, заполненных разными частичными представлениями, которые имеют одинаковые $("#Customer_ID").change Javascript

У меня есть страница с двумя div для всплывающих окон jquery ui

Когда я щелкаю ячейку в jqgrid, я открываю соответствующий диалог (Edit или New)

Всплывающие окна в свою очередь заполняются частичным представлением от контроллера

Это отлично работает

У меня есть три уровня каскадных выпадающих в этих всплывающих окнах. Большую часть времени они работают правильно. После нескольких открытий и закрытий всплывающих окон динамические выпадающие списки перестают работать

На этом этапе динамический выпадающий 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>

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