HTML加载jQuery函数

debugcn 发表于 Dev

亚什

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

以下是代码：

script.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。

advertmanagerpro.com

每当使用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());
  });

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。