jQuery不会触发

jQuery won't fire

本文关键字：jQuery      更新时间：2023-09-26

我试图在这里的页面上实现这段代码，这是我的小提琴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（）：

$（document）.ready（function（）{

[您的代码在这里]

}）;

试试这个 

$( 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();
});
});

在你调用jQuery函数时，DOM还没有加载，所以jQuery找不到请求的元素。为避免这种情况，只需将其包裹在

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

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

$(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>

相关文章：