Когда я нажимаю на кнопку, ничего не происходит - PullRequest
0 голосов
/ 18 января 2020

У меня есть следующие 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>

Когда я нажимаю на кнопку, ничего не происходит, кажется, что событие не запускается.

Ответы [ 3 ]

1 голос
/ 19 января 2020

Это проблема кеширования. Когда вы разрабатывали и тестировали код JQuery, ваш старый код оставался в кэше браузера. Браузер кэшировал его, чтобы быстрее загружать страницу при следующем использовании. Чтобы решить эту проблему, у вас есть 3 варианта.

  1. Удалить историю браузера
  2. Обновить sh ваш браузер, нажав Ctrl + F5 (Предпочтителен для для разработки)
  3. Сообщите браузеру, что этот код JQuery изменился, добавив версию для него. Он используется, когда вы публикуете свой код на сервере, потому что вы не можете попросить своих клиентов удалить историю браузера или загрузить страницу, нажав Ctrl + F5

Здесь это то, как вы можете добавить версию к вашему JQuery коду:

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

Посмотрите на v=1. В следующий раз, когда вы обновите код JQuery, измените его на v=2, чтобы сообщить браузеру, что ваш код был изменен.

0 голосов
/ 19 января 2020

Убедитесь, что в HTML нет другого элемента с таким же идентификатором.

0 голосов
/ 18 января 2020

Вы можете попробовать следующее:

Прежде всего, ваша HTML разметка. Я думаю, что это может быть неправильно, так как вы неправильно указываете на папки. Я прикрепил все файлы css и js bootstrap + jquery через CDN.

<!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>

Поэтому ваш сценарий. js остается таким, как есть. Для меня это сработало так. Я получил сообщение, напечатанное на моей консоли. Надеюсь, что это поможет вам.

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...