javascript - переменная равна нулю при загрузке html контента с jquery - PullRequest
Новая
       1

javascript - переменная равна нулю при загрузке html контента с jquery

0 голосов
/ 04 февраля 2020

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

$(document).ready(function() {
    $('#header').load("header.html");
});

Заголовок загружается нормально, но проблема в том, что у меня есть кнопка в этом заголовке, которую я назначил переменной: 

var headerButton = document.querySelector('.header__header-button')

И я добавил прослушиватель событий для этой кнопки чтобы выполнить некоторый код при нажатии: 

headerButton.addEventListener('click', function () {

Проблема в том, что я получаю сообщение об ошибке в консоли javascript: 

TypeError: headerButton is null page.js:17:1

Кажется, проблема в что переменной присваивается значение до загрузки Html, хотя я не уверен. В переменной или в EventListener нет ничего плохого, все работает, когда заголовок находится в основном файле. Итак, что я могу сделать, чтобы решить эту проблему?
.. Или, может быть, есть лучший способ импортировать Html, о котором я не знаю?

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Вы должны также использовать $(document).ready() внутри header.html, чтобы убедиться, что ваш DOM доступен, прежде чем пытаться манипулировать элементами с помощью JavaScript.

Вот пример страницы, которую вы пытаетесь для загрузки header.html в: 

<!-- index.html -->
<html lang="en">
  <head><!-- ... --></head>
  <body>
    <div id="header"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#header").load("header.html");
      });
    </script>
  </body>
</html>

Затем внутри вашего header.html выполните следующее: 

<!-- header.html -->
<header>
  <p>This is a header.</p>
  <button id="button" type="button" className="header">
    Header button - click me!
  </button>
</header>
<script>
  $(document).ready(function() {
    var btn = document.getElementById("button");
    btn.addEventListener("click", function() {
      alert("button was clicked");
    });
  });
</script>

Вот рабочий пример, если вы хотите увидеть демо:

0 голосов
/ 04 февраля 2020

Вы можете попробовать использовать функцию обратного вызова. 

$(document).ready(function() {
    $('#header').load("header.html", () => {
        var headerButton = document.querySelector('.header__header-button');
        headerButton.addEventListener('click', function () {});
    });

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

Нет похожих вопросов

...