当我点击按钮时，没有任何反应

Question

我有以下HTML ，

 $(document).ready(function() { $('#searchMovieBtn').click(function(e) { e.preventDefault(); console.log('search'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="searchMovieBtnBox"> <button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button> </div>

当我点击按钮时，没有任何反应，似乎事件没有触发。

Answer 1

这是一个缓存问题。 当您开发和测试 JQuery 代码时，您的旧代码保留在浏览器缓存中。 浏览器缓存它以在下次使用时更快地加载页面。 为了解决这个问题，您有 3 个选择。

删除浏览器历史记录
按Ctrl + F5刷新浏览器（首选用于开发目的）
通过为它添加一个版本来告诉浏览器此 JQuery 代码已更改。 当您在服务器上发布代码时使用它，因为您无法通过按Ctrl + F5要求您的客户删除他们的浏览器历史记录或加载您的页面

以下是向 JQuery 代码添加版本的方法：

<script type="text/javascript" src="js/script.js?v=1"></script>

看看v=1 。 下次更新 JQuery 代码时，将其更改为v=2以告诉浏览器您的代码已更改。

Answer 2

你可以试试下一个

首先，我认为您的 HTML 标记可能是错误的，因为您没有正确指出文件夹。 我通过 CDN 附加了所有的 css 和 js bootstrap + jquery 文件。

<!DOCTYPE html>
 <html>
   <head>
   <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <title> jQuery button click event working?</title>
</head>
<body>
  <div id="searchMovieBtnBox">
    <button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
  </div>
  </body>
 </html>

因此，您的 script.js 保持原样。 对我来说，它是这样工作的。 我将消息打印到我的控制台上。 希望能帮到你。

Answer 3

确保 HTML 中没有其他具有相同 id 的元素。

当我点击按钮时，没有任何反应

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-01-19 12:39:33

解决方案2
0 2020-01-18 12:32:10

解决方案3
0 2020-01-19 20:43:51

当我点击按钮时，没有任何反应

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-01-19 12:39:33

解决方案2 0 2020-01-18 12:32:10

解决方案3 0 2020-01-19 20:43:51

解决方案1
1 已采纳 2020-01-19 12:39:33

解决方案2
0 2020-01-18 12:32:10

解决方案3
0 2020-01-19 20:43:51