javascript - 加载ajax内容后，jQuery搜索过滤器不起作用

我有一个示例代码

Search:<input type="search" class="form-control" id="search">
<table id="gwAssignForm"><tbody></tbody></table>

而我的jQuery：

$(document).ready(function() {
   $.ajax({
      type: "POST",
      url: "content.php",
      data: {},
      async : false,
      success: function(result) {
         $('#gwAssignForm tbody').html(result.html);
      },
      error : function(xhr, status){
         console.log(status);
      },
   });
   var $rows = $('#gwAssignForm tbody tr');
   $('#search').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
   });
});

在content.php上

   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>

加载ajax内容后。我开始搜索，但是没有用。如何解决？

最佳答案

它不起作用，因为您试图在加载ajax数据之前将元素添加到$rows。您只需要在$rows函数中声明keyup。

只需更改此-

var $rows = $('#gwAssignForm tbody tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});

为此-

$('#search').keyup(function() {
  var $rows = $('#gwAssignForm tbody tr');
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});