jQuery不会触发答案

【问题标题】：jQuery won't firejQuery不会触发
【发布时间】：2015-02-15 11:50:57
【问题描述】：

我尝试在此页面上实现此代码here，这是我的小提琴JSFiddle，一切似乎都工作正常（过滤）但是当我尝试在我的页面中实现它时，jQuery 似乎没有工作，我不知道为什么。以下是我在filter.php 页面上的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filter</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

</script>
</head>

<body>

<input type="text" id="search" placeholder="Type to search">
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>
</body>
</html>

谁能告诉我我做错了什么？

【问题讨论】：

你错过了$(document).ready() 行。
@SenorAmor 哈哈。好的。我忘了。谢谢

标签： javascript jquery regex

【解决方案1】：

将您的代码包装在$( document ).ready()：

$(document).ready(function(){

[你的代码在这里]

});

【讨论】：

【解决方案2】：

试试这个

$( document ).ready(function() {
    var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});
});

【讨论】：

【解决方案3】：

在您调用 jQuery 函数时，DOM 尚未加载，因此 jQuery 不会找到请求的元素。为避免这种情况，只需将其包装在一个

$(document).ready(function(){ /* code here */ }

为了减少文件的加载时间，您可能希望将 javascript 放在文件末尾，就在关闭 </body> 标记之前

【讨论】：

【解决方案4】：

$(document).ready(function() {  //check it!

  var $rows = $('#table tr');
  $('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
      reg = RegExp(val, 'i'),
      text;

    $rows.show().filter(function() {
      text = $(this).text().replace(/\s+/g, ' ');
      return !reg.test(text);
    }).hide();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<input type="text" id="search" placeholder="Type to search">
<table id="table">
  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
</table>

【讨论】：