时间戳

首页 > 解决方案 > HTML 加载 jQuery 函数

javascript - HTML 加载 jQuery 函数

问题描述

谁能帮我理解，为什么我无法使用 HTML（index.htm）加载我的 jQuery 函数（存储在 script.js 中）

以下是以下代码：

脚本.js

$.get("./Components/head.htm", function(data) {
  $("head").append(data);
});

$("#logo").on("error", function() {
  $(this).hide();
  $("#name").show();
});

$("#search").keyup(function() {
  alert($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>SAM</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="./script.js"></script>
</head>

<body>
  <div id="header">
    <div id="brand">
      <img src="./Static/Logo.png" id="logo">
      <h1 hidden id="name">SAM Store</h1>
    </div>
    <div>
      <input type="search" id="search" list="suggest">
      <datalist id="suggest">
                    <option value="Laptop"></option>
                    <option value="Mouse"></option>
                    <option value="Keyboard"></option>
                    <option value="Speaker"></option>
                    <option value="Earphone"></option>
                </datalist>
    </div>
    <script>
    </script>
  </div>
</body>

</html>

[注意：如果我在 index.htm 中添加 $.get 函数并使用它导入 script.js，则函数正在工作，但如果我在 index.htm 上引用 script.js 并导入 $.get 函数，它们将不起作用. 此外，在这两种情况下，浏览器都能够成功加载 script.js]

标签： javascripthtmljquery

解决方案

每当您使用 jquery 时，始终将代码加载到 on ready 语句中，否则它们将不会始终按时加载。

$( document ).ready(function() {

  $.get("Components/head.htm", function(data) {
    $("head").append(data);
  });

  $("#logo").on("error", function() {
    $(this).hide();
    $("#name").show();
  });

  $("#search").keyup(function() {
    alert($(this).val());
  });

});

推荐阅读