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 个答案: