Блог

Главная - Вопросы по программированию - Обработчик событий jQuery не работает в этом коде

Обработчик событий jQuery не работает в этом коде

#jquery #events #click

#jquery #Мероприятия #нажмите

Вопрос:

В настоящее время я не могу заставить этот код работать с помощью jQuery. То же самое событие срабатывает, когда я добавляю его специально к элементу ссылки «a». Я ожидал бы, что jQuery зарегистрирует оповещение, которое будет отображаться при нажатии на ссылку, но ничего не происходит, когда я нажимаю на эту ссылку. Я запускаю этот HTML-код в Chrome, и консоль DevTools вообще не показывает никаких ошибок! Я не уверен, что я мог делать неправильно, поскольку я делаю это просто по инструкции! В целом я видел, что jQuery не работает ни для чего javascript, но я опубликовал этот небольшой фрагмент кода для иллюстрации. Ценю любую помощь в выяснении того, что я мог делать неправильно!

 <html>

<head>
  <!-- jQuery version 3.3.1 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" />
  <script>
    $(document).ready(function() {
      $("a").click(function() {
        //This should show an alert when any link on the page is clicked.
        alert("This is a test");
      })
    });
  </script>
</head>

<body>
  <a href="#">Click here to see alert</a>
  <!-- This does not work! -->
  <!-- This works fine!
                <a href="#" onclick="javascript:alert('This is a test');">Click here to see alert</a> -->
</body>

</html>

Ответ №1:

Проблема в том, что script тег не является самозакрывающимся. Вам нужно добавить отдельный </script> тег после вашего jQuery.js ссылка:

 <html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("a").click(function() {
        console.log("This is a test");
      })
    });
  </script>
</head>
<body>
  <a href="#">Click here to see alert</a>
</body>
</html>

Причина, по которой ваш onclick="javascript:alert('This is a test');" все еще работает, заключается в том, что он не полагается на неработающую ссылку на jQuery.

Тем не менее, вам следует избегать использования on* атрибутов события, поскольку они очень устарели. Ненавязчивые обработчики событий — безусловно, лучшая практика здесь.

Комментарии:

1. Вау, это сработало! Большое спасибо за быстрый ответ! 🙂

2. Я не могу заметно повысить голос за ответ, но я проголосовал. еще раз спасибо!