Question

我遇到了问题。我有一个HTML页面，在同一个脚本标记中有一个javascript代码和一个jQuery代码。

这是我用javascript和jQuery的html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Page</title>

  <!-- css -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link href="css/nivo-lightbox.css" rel="stylesheet" />
  <link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet">

  <!-- javascript and bootstrap -->
  <script src="js/jquery.min.js"></script>
  <link href="js/bootstrap.min.js" type="text/javascript">
  <link href="js/modal.js" type="text/javascript">

  <!-- template skin -->
  <link id="t-colors" href="color/default.css" rel="stylesheet">


  <script>

    <!-- HERE IS SOME PURE JAVASCRIPT CODE -->

$(document).ready(function() {
  var table = $('#tableBody tr td');

  table.on("click",function() {
    table.removeClass("test-class");
    $(this).addClass("test-class");
  });
});
</script>

我的问题是：当页面加载时，我的jQuery函数不起作用，但是当我复制这个函数并将其粘贴到浏览器的控制台上时，它可以很好地工作。

注意：当我在浏览器的控制台上发出警报时，它会起作用。这意味着我的jQuery正在加载页面。

我缺少什么？

提前致谢。

Answer 1

尝试代码

$('document').on("click",'#tableBody tr td',function() {
  var table = $('#tableBody tr td');
  table.removeClass("test-class");
  $(this).addClass("test-class");
});

我不知道是否在代码中创建了td元素，或者它是静态html。如果td或table是动态的，那么DOM不知道它在哪里，因为当浏览器运行时，它总是保留原始html的记录。

DOM有时会丢失其跟踪，因此使用（'click'，'＃target'，func（））上的格式将使DOM返回并再次找到目标。

Answer 2

这可能是因为浏览器的控制台有自己的美元符号对象＆＃34; $＆＃34;，至少是Firefox和Chrome。

来自https://developer.chrome.com/devtools/docs/console：

$（）

返回与指定的CSS选择器匹配的第一个元素。它是document.querySelector（）的快捷方式。

$$（）

返回与指定的CSS选择器匹配的所有元素的数组。这是document.querySelectorAll（）
的别名
$ X（）

返回与指定的XPath匹配的元素数组。

要检查是否加载了jquery，您可以在浏览器控制台中执行此操作：

typeof jQuery

如果已加载，则答案为

"function"

加载页面时jQuery代码不起作用

2 个答案: