each of jquery does not find "TR" dynamically added to table

Question

Hello, I have a table where the first TR of it is fixed containing some inputs to search

Assunto | Data   | Categoria
input1  | input2 | input3
item1   | item 1 | item 1

Where this item 1 is added dynamically as the result of the input search, my current code:

$(document).on("keyup", "input", function(){
    var tipo = $(this).attr("name");
    var text = $(this).val();
    var obj = {}
    obj[tipo] = text;
    $.ajax({
        url: "minhaurl",
        data: obj,
        type: "POST",
        success: function(result){
            $('table > tbody > tr').not('#resident').each(function() {
                $(this).remove();
            });

            $("#meusLec").append(result);
        }
    });
});

It works correctly, but only in the first query, in the second where the items are added dynamically, jquery does not traverse each and does not empty the table with the new results

Answer 1

I think I understand what you need to do. The idea is to search for columns in the table. If I’m wrong correct me.

To make this feature, the fields <input/> evening at the <thead>, not in the <tbody>. Another thing. There is no need to make a new request to popular the table at each keyup user. Unless the processing is server-side. Anyway, come on, come on:

The functional example has here

This is the Structure HTML:

<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
    <tr id="tr-search">
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </tfoot>
  <tbody>
    <tr class="row">
      <td class="name">Tiger Nixon</td>
      <td class="position">System Architect</td>
      <td class="office">Edinburgh</td>
    </tr>
    <tr class="row">
      <td class="name">Garrett Winters</td>
      <td class="position">Accountant</td>
      <td class="office">Tokyo</td>
    </tr>
    <tr class="row">
      <td class="name">Ashton Cox</td>
      <td class="position">Junior Technical Author</td>
      <td class="office">San Francisco</td>
    </tr>
    <tr class="row">
      <td class="name">Cedric Kelly</td>
      <td class="position">Senior Javascript Developer</td>
      <td class="office">Edinburgh</td>
    </tr>
  </tbody>
</table>

Structure CSS

.remove {
  display: none;
}

Structure JavaScript

$('#example thead th').each( function () {
  var title = $(this).text();
  $('#tr-search').append( '<td><input type="text" class="inputs-search" name="'+title.toLowerCase()+'" placeholder="Looking for '+title.toLowerCase()+'"/></td>');
});

$('.inputs-search').on('keyup', function(){
    var search = $(this).val();
    var column = $(this).attr("name");
  var target = '.row .' + column;
  var match = new RegExp(search, "i"); 

  $(target).each(function(){
        if (!match.test($(this).text())) {
        $(this).closest('tr').addClass('remove');
      } else {
        $(this).closest('tr').removeClass('remove');
      }
  });
});

To work, just popular the bank table as you are doing. A hint, all that was developed in the nail, could have been easily developed using the plugin of Jquery datatables. That by the way, already have this functionality ready.

I made this example to illustrate here. Any questions, just comment.