Как выбрать элемент из подключенного PHP-файла с помощью JavaScript?

Оффтоп javascript
1

Я создаю сайт с множеством страниц и решил вынести навигационную панель в отдельный PHP-файл, чтобы упростить обновление. В index.php я подключаю панель навигации:

<?php include 'menu.php'; ?>

Файл menu.php содержит такую структуру:

<nav id="menu"> 
  <ul>
    <li data-page="main">Главная</li>
    <li data-page="services">Услуги</li>
    <li data-page="contacts">Контакты</li>
  </ul> 
</nav>

В index.php у меня есть JavaScript-функция для обработки кликов по пунктам меню:

let activePage = "main";
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#menu ul').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
      // Здесь код для скрытия/показа блоков
    }
  });
});

Но при клике на пункты меню ничего не происходит. Похоже, JavaScript не видит элементы из подключенного PHP-файла. Как мне правильно обратиться к этим элементам?

2

Твой код в целом выглядит нормально, но есть пара моментов. Во-первых, убедись, что скрипт выполняется после загрузки DOM - лучше перенести его в конец body. Во-вторых, вместо querySelector попробуй использовать getElementById:

let menu = document.getElementById(‘menu’);
if (menu) {
menu.addEventListener(‘click’, function(e) {
if (e.target.tagName === ‘LI’) {
activePage = e.target.dataset.page;
// Дальше твой код
}
});
}

Так должно сработать. Если нет - проверь консоль на ошибки.

3

да, с подключаемыми файлами бывают такие проблемы. тут дело не только в том, когда загружается dom. важно еще правильно делегировать события. вот что я бы посоветовал:

document.addEventListener(‘click’, function(e) {
if (e.target.closest(‘#menu li’)) {
let clickedItem = e.target.closest(‘#menu li’);
activePage = clickedItem.dataset.page;
// дальше твой код
}
});

этот подход работает даже если меню подгружается динамически. плюс он более производительный, так как вешает только один обработчик на весь документ. попробуй, должно помочь!

4

Проблема может быть в том, что DOM ещё не загрузился полностью. Попробуй перенести весь код в функцию, которая выполняется по событию ‘load’:

window.addEventListener(‘load’, function() {
let menu = document.querySelector(‘#menu ul’);
if (menu) {
menu.addEventListener(‘click’, function(e) {
if (e.target.tagName === ‘LI’) {
// Твой код обработки клика
}
});
}
});

Так ты точно дождёшься загрузки всех элементов, включая те, что из PHP-файла.