javascript - JQuery - Row click event won't fire on newly added table rows -

question background:

i have table in view dynamically populated database. filters in view allow user select data in-turn needs displayed on table. re-adding of data achieved through deleting current table rows adding new data in place.

the issue:

on each table row have ability click row renders data in modal pop-up, each time user changes filter list database re-queried, requires table data removed repopulated. the newly added rows not triggering row click event when selected.

the code:

the table populated in view follows:

@foreach (var component in @model.componentdetailslist) {     <script>          var codebase = '@component.codebase';         var component = '@component.componentname';         var tfslocation = '@component.componentdevtfslocation';         var tfsqalocation = '@component.componentqatfslocation';          addrows(codebase, component, tfslocation, tfsqalocation);     </script> } 

the jquery method addrows:

    function addrows(codebase, component, tfslocation, tfsqalocation) {      $html = '<tr><td id="codebasecell"><b>' + codebase + '</b></td><td  id="componentcell">' + component + '</td><td class="hidden-xs hidden-sm" id="tfsdevcell">' + tfslocation + '</td><td class="hidden-xs hidden-sm" id="tfsqacell">' + tfsqalocation + '</td><td><button type="button" class="btn btn-danger pull-left" id="deletequeuedcomponent">delete</button></td></tr>';      $("#componenttable tbody").append($html); }; 

the row on-click event:

$(document).ready(function () {  $('#componenttable tr').click(function () {  var tfscodebase = $(this).find('#codebasecell').text();  alert(tfscodebase);  var tfscomponent = $(this).find('#componentcell').text();  $.ajax({     url: "/release/getcomponentfiles",     data: { codebase: tfscodebase, component: tfscomponent },     success: function (component) {          var count = 0;          var componentname = component.componentname;          var componentcodebase = component.componentcodebase;          (var item in component.filelist) {              var devitem = component.componentdevtfslocation + '/' + component.filelist[item];              var qaitem = component.componentqatfslocation + '/' + component.filelist[item];              count++;              addrowstomodal(componentname, componentcodebase, component.filelist[item], devitem, qaitem, count);         }          document.getelementbyid("modalinfo").innertext = 'queued files for: ' + component.componentname;          $("#componentmodal").modal('show');     } }); }); }); 

the function called when filter item clicked. cleartableandaddrows function deletes table contents , re-adds stated the row click event handler no longer work:

 $(document).ready(function () {      $("#codebasenamelist li").click(function () {         var codebase = $(this).text();          $.ajax({             url: "/release/querycomponentsbycodebase",             data: { codebase: codebase },             success: function (component) {                  (var item in component.codebaselist)                 {                     cleartableandaddrows(component.codebaselist[item].codebase, component.codebaselist[item].componentname, component.codebaselist[item].componentdevtfslocation, component.codebaselist[item].componentqatfslocation);                      addrowstocomponentlist(component.codebaselist[item].componentname);                  }             }         });     });     }); 

the jquery method cleartableandaddrows used delete, re-add new rows existing table body:

function cleartableandaddrows(codebase, component, tfslocation, tfsqalocation) {  $("#queuedfilestable").empty();  $htmlfilteredrow = '<tr><td id="codebasecell"><b>' + codebase + '</b></td><td id="componentcell">' + component + '</td><td class="hidden-xs hidden-sm" id="tfsdevcell">' + tfslocation + '</td><td class="hidden-xs hidden-sm" id="tfsqacell">' + tfsqalocation + '</td><td><button type="button" class="btn btn-danger pull-left" id="deletequeuedcomponent">delete</button></td></tr>';  $("#componenttable tbody").append($htmlfilteredrow); }; 

event handlers bound selected elements; must exist on page @ time code makes event binding call.

you need use event delegation using .on() delegated-events approach dynamically added elements.

$('#componenttable').on('click','tr', function () {    //your code }); 

the delegated events have advantage can process events descendant elements added document @ later time. picking element guaranteed present @ time delegated event handler attached, can use delegated events bind click event dynamically created elements , avoid need attach , remove event handlers.