change event stops firing after jqueryui popups opened and closed

Question

Here's the short TL;DR version:

I have an onchange event against a select list that stops firing

Is there any issue using JQuery against an element id i.e. $("#Customer_ID").change, if that element is inside a jqueryui popup that is populated from a partial view. Further to this I have two different popups populated by different partial views that share the same $("#Customer_ID").change javascript

I have a page with two divs for jquery ui popups

When I click in a cell in jqgrid, I popup the appropriate dialog (Edit or New)

The popups are in turn populated by a partial view from a controller

This works fine

I have three levels of cascading drop downs in these popups. Most of the time they work correctly. After a few opens and closes of the popups however the dynamic drop downs stop working

At this point the dynamic drop down jscript is being loaded OK but it seems the change event is not being fired.

I suspect it's because I have two popups with identically named controls?

Anyway here is some abridged code fragments

_Layout.cshtml

Has a reference to the js that attaches all the JQueryui stuff

<!-- Logic to setup edit,new,delete popups -->
<script src="~/Scripts/Layout.js" type="text/javascript"></script>

Layout.js

Contains code to set up the edit popup and some other things. Here's just the part for the create popup:

        $("#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

This actually has a jqGrid on it. Clicking on a cell pops up, for example the create popup.

<!-- 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

This is fed by a controller that returns a partial view. This is where the problems start. The Customer_ID drop down cascades to the CustomerProject_ID drop down. After a few closes and opens it stops working though. This also has a reference to TasksDialogs.js which has all the cascading drop down stuff (The cascading drop down is the subject of another question here: cascading drop downs repeatedly populated

(this code is found in tasks view folder)

<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

Finally we have this script. Normally this works but after a few popup opens and closes, CustomerID.change no longer appears in the console.

You can see I've tried two different ways of attaching the change event. Both exhibit the same symptom.

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

I don't know that I need to post controller code. That part all works fine.

Answer 1

In the javascript that manages the dynamic drop downs I was using

$("#Customer_ID")

to refer to fields on two different dialogs.

Turns out I need to use these instead, to specifically refer to the field I want:

$(div#dialog-create #Customer_ID")

$(div#dialog-edit #Customer_ID")

I think possibly the change event is not being attached properly for the same reason. For now I got around it by hard coding the change into the control in the cshtml view like this:

@Html.DropDownList("Customer_ID", null, 
htmlAttributes: 
new { 
@class = "form-control", 
@onchange= "refreshProjectFromClient()" 
})