JQuery обработчик событий не работает в этом коде - PullRequest
Новая
       17

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

1 голос
/ 12 марта 2019

В настоящее время я не могу заставить этот код работать с использованием jQuery.То же самое событие работает, когда я добавляю его специально к элементу ссылки «а».Я ожидаю, что 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 Ответ

1 голос
/ 12 марта 2019

Проблема в том, что тег 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* атрибутов событий, так как они очень устарели. Ненавязчивые обработчики событий - безусловно, лучшая практика здесь.

...