Jquery .change() Only Fires Once

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

Solution 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.

Solution 2:

A more modern answer using jquery 3.6

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