My change event selector is not working anymore after an AJAX call?

My change event selector is not working anymore after an AJAX call?

Hello,

I have an table which initial filled server sided with 300 rows or it can be even more.
  1. var strhtml = '<table id="table" class="">';
  2. strhtml += '<tbody>';
  3. strhtml += '<tr>';
  4. strhtml += '<td><input type="checkbox" class="select" id="select_' + result.data[i].cmid + '" name="select_' + result.data[i].cmid + '" value="' + result.data[i].cmid + '"' + checked + '/></td>';
  5. strhtml += '<td><input ...

  6. strhtml += '<td><input type="text" class="update" id="shnr_' + result.data[i].cmid + '" name="shnr_' + result.data[i].cmid + '" value="' + shirtnr + '" /></td>';
  7. strhtml += '<td>' + result.data[i].posc + '</td>'; strhtml += '</tr>';
  8. strhtml += ' </tbody>'
  9. strhtml += '</table>'; 
 I have an event selector for the class="update":
  1. jQuery('.update').on('change',function () {
  2.   var arrelement = jQuery(this).attr('id').split('_');
  3.   var objCheckbox = jQuery("#select_" + arrelement[1]);
  4.  
  5.   if (jQuery(objCheckbox).is(':checked'))
  6.     checkSelected(objCheckbox);
  7. });
This initial is al working fine.

But after the AJAX call the event selector is not working anymore and I understand a bit why, because the table is completely build again with jQuery now, which means the DOM has been changed and the 'change' event is not bind anymore to elements as the page was opened.

But how do you resolve this. I read some about 'delegation' and I can't visualize so that I can imagine what is happening.

One thing what I have done is add the event selector again to the .done of the AJAX call. Than it is 'working' but is this the idea behind 'delegation'? I think not, that it run to the complete document and bind the event selector...?

  1. jQuery.ajax({
  2.   type: "POST",
  3.   dataType: "json",
  4.   url: getUrl,
  5.   data: {task: "Filter", view: "viewname", format: "json", arfilter: arfilter},
  6.   success: function(result, status, xhr) {displayFilterResults(result); },
  7.   error: function() { console.log('ajax call failed'); },
  8.   })
  9.   .done(function() {
  10.    
    1. jQuery('.update').on('change',function () {
    2.   var arrelement = jQuery(this).attr('id').split('_');
    3.   var objCheckbox = jQuery("#select_" + arrelement[1]);
    4.  
    5.   if (jQuery(objCheckbox).is(':checked'))
    6.     checkSelected(objCheckbox);
    7. });                 
  11.    });
But this looks very strange to me. Now I have implemented twice the event selector 'change' for the class="update", once the 'normal' way and what I expect, and the second time which will be used after an AJAX call.

I should more expect that in the .done something will be done to reorganize the DOM and add the event selector to elements and that everything is working via the 'normal' event selector.

Can someone help me a bit how this should be done?

Nico