Тег<script> не работает в html <head> или во внешнем js-файле

Попытка потребовать JS в файле HTML. Требуются внешние js-файлы через теги, показанные ниже

<script type="text/javascript" src="scripts/ui.js"></script>
<script type="text/javascript" src="scripts/events.js"></script>

Эти теги сценариев не работали, потому что обработчики событий внутри них не срабатывали. Итак, в предыдущем проекте мне посчастливилось написать всю логику js в тегах HTML, которая выглядит следующим образом (также в этом проекте вместе с внешним js). Кроме того, в html-файле есть кнопка с "shuffle" в качестве ее учебный класс.

<script type="text/javascript">
$(".shuffle").click(function(){
  console.log("hello");
  let arr = onShuffle();
  shuffleSuccess(arr);
});

</script>

Интересно, что я поместил вышеупомянутую функцию в консоль файла index.html/project, и обработчик щелчков работал так же, как shuffleSuccess функция, которая находится во внешнем файле js. Спасибо!

Источник

3 ответа

Решение

Ваш скрипт должен выполняться после того, как ваша кнопка находится в DOM. Вы можете разместить его внизу страницы, перед закрывающим тегом body, или использовать document.ready, как показано ниже:

//This waits until all objects are loaded in the DOM
$(document).ready(function() {
    //Then assigns the event handler
    $(".shuffle").click(function(){
      console.log("hello");
      let arr = onShuffle();
      shuffleSuccess(arr);
    });
});

Если ваш скрипт находится во внешнем файле $(document).ready хороший вариант

Кроме того, вы можете использовать http://api.jquery.com/on/. Это будет применять обработчик кликов ко всему с классом shuffle это в body, даже если он будет добавлен позже. Это возможно лучше чем $(document).ready

$("body").on("click", ".shuffle", function() {
  console.log("hello");
  /*let arr = onShuffle();
  shuffleSuccess(arr);*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="shuffle">Shuffle</button>

Если вы хотите изменить порядок сценариев, будет работать что-то вроде следующего:

<html>
   <head>
      <title>Your Page</title>
      <!-- Some CSS Links -->
   </head>
   <body>
     <!-- Some Content --> 
     <input type="button" value="I'm a button">
     <!-- Some more content -->
     <!-- Note: the script comes after the button is placed -->
     <script type="text/javascript">
     $(".shuffle").click(function(){
        console.log("hello");
        let arr = onShuffle();
        shuffleSuccess(arr);
     });
     </script>
  </body>
</html>
Источник

Использовать:

      <script type="text/javascript" src="js/main.js"></script>

Вместо:

      <script type="text/javascript" src="js/main.js"/>
Источник

Мои предложения: 1. Если вы используете html5, например , используйте вместо этого следующее:

<script src="scripts/ui.js"></script>
<script src="scripts/events.js"></script>

2. Поместите теги сценария внизу страницы следующим образом:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- include jquery cdn link. internet connection is needed to work-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div>  <!-- just some elements -->
            <div>Just some elements</div>
        </div>
        <!-- include the script tags here like this -->
        <script src="scripts/ui.js"></script>
        <script src="scripts/events.js"></script>
    </body>
</html>

3. Убедитесь, что вы правильно указали пути к файлам javascript. Тем не менее, если все это не решило вашу проблему, вам может потребоваться опубликовать фактический HTML и описать структуру файла для HTML и Javascipt. Я почти забыл спросить, подтверждается ли работа jquery, вы включили ссылку на jquery?

Еще несколько вещей
1. Пожалуйста, сделайте это перед тем, как опробовать любое из приведенных выше предложений: закомментируйте весь свой код jquery и напишите console.log("Hi"); проверьте, сработало ли оно. Если это не сработало, используйте теги script, как описано выше, и повторите попытку. Если в этот раз это не сработало, значит, вы неправильно указали путь к файлу js. Если это сработало, значит что-то не так с jquery.

Источник
Другие вопросы по тегам