javascript - jQuery .change() only fires once

Question

I have a DropDownList called "ddlCaseFiles". I then have a script which I import that contains the jQuery .change() function to capture the event. Then I have 3 radio buttons which sorts the dropDownList. When the default radio button is loaded, then the event fires. But as soon as I select another radio button, then the event doesn't fire anymore.

Here is my DropDownList:

<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" 
DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" />

and here is my jQuery .change():

 $('#ddlCaseFiles').change(function () {
    debugger;
    $('#lblNextExhibitNumber').text('');
    var temp = $(this).val();
});

Here is a snipper of what the radio buttons do:

    protected void rbByFileName_CheckedChanged(object sender, EventArgs e)
{
    ddlCaseFiles.DataSourceID = "dsCaseFilesReverse";
    ddlCaseFiles.DataTextField = "Display";
    ddlCaseFiles.DataValueField = "FileID";
}

protected void rbByFileID_CheckedChanged(object sender, EventArgs e)
{
    ddlCaseFiles.DataSourceID = "dsCaseFiles";
    ddlCaseFiles.DataTextField = "Display";
    ddlCaseFiles.DataValueField = "FileID";
}

I have never used the .change() before. So maybe I am missing something

Answer 1

Looks like your CheckedChanged events of the radio buttons don't trigger the dropdown change event. The JS change event fires when the selected value of a drop down changes. This doesn't necessarily happen when you change the DataSourceID, does it?

I'm not sure how to trigger this in ASP. Perhaps ddlCaseFiles.SelectedIndexChanged()?

Otherwise, you could add a click event handler to the radios:

$('input[type="radio"].someCssClass').click(function(){
   $('#ddlCaseFiles').trigger('change');
});

EDIT:

This is just a guess, but it looks like the CheckedChanged might be modifying the <select> element on the page. For example, is it reinserted every time DataSourceID changes?

Try changing your dropdown change event handler like this using the .on() function:

$('body').on('change', '#ddlCaseFiles', function () {
    debugger;
    $('#lblNextExhibitNumber').text('');
    var temp = $(this).val();
});

Note: for better performance change $('body') to some container closer to the dropdown.

The .change() function attaches the change handler to an element on a page. If ASP removes an element and re-adds it later then the handler is gone.

A handler attached using the .on() function persists even if the element is removed. Read more here.

Answer 2

A more modern answer using jquery 3.6

    $(document).on('change', "#ddlCaseFiles", function (e) {
      debugger;
      $('#lblNextExhibitNumber').text('');
      var temp = $(this).val();
    });