Проблема вызова AJAX для ссылки на внутреннюю страницу в одностраничном приложении PHP

Question

Я просмотрел множество ответов StackOverflow, но не могу найти работающий ответ. Кажется, это должно быть так просто.

У меня есть одностраничное веб-приложение на PHP. У этого есть навигационная панель, которая загружает страницы как включает. Щелчок по навигационной панели вызывает функцию jQuery для загрузки другого включения и вставки класса в div. Это работает в навигации.

В одном из включений у меня есть ссылка HTML:

<div class="page-content">
    <a class='btn-primary'>See Examples</a>
</div>

Это jQuery, который я хочу выполнить:

$(".btn-primary").click(function() {
    alert('you clicked me');
    $('.page').attr('class', 'page examples');
    // REPLACE THE CURRENT INCLUDE
    $('.page-content').load('includes/page-examples.php');
    window.scrollTo(0, 0);
});

Но ссылка не выполняет функцию. Изменение его на div не работает. Нажатие даже не выполнит предупреждение.

Я пытался поместить ссылку в php echo или php print , но это не имеет значения. Я проверил все свои имена, и там нет опечатки.

Какой лучший способ заставить его работать?

----- РЕДАКТИРОВАТЬ -----

jQuery вызывается из js-файла, вызываемого из тега head index.php, и находится в операторе DOM ready. Похоже, DOM готов перед загрузкой по ссылке. Если я удаляю ссылку js из файла js и помещаю ее во включаемую ссылку, то ссылка работает, но это создаст проблему, так как другие внутренние ссылки добавляются на сайт в других включениях.

Какой лучший способ исправить?

Answer 1

Звучит так, как будто привязка клика по javascript $(".btn-primary").click(...); выполнена в DOM-ready.

Но в то время .btn-primary еще не в DOM, так как он вставляется в DOM только после того, как вывключите его (если я правильно понял).

Поэтому привязка никогда не происходит, и после загрузки вашего первого включения код привязки клика никогда не выполняется снова, и поэтому элемент .btn-primary не имеет события onClick.

Вам нужно запустить свой фрагмент JavaScript после того, как этот элемент .btn-primary будет вставлен в DOM, например.как это:

$('.page-content').load('includes/first-include.php', function(){
    $(".btn-primary").click(function() {
        whatever...
    });
});

Answer 2

Первый шаг

Проверьте, импортируете ли вы библиотеку jQuery (это кажется очевидным, но иногда мы можем забыть импортировать библиотеку, либо неверный URL-адрес библиотеки и браузерне может признать это также).И помните, что вам нужно импортировать jQuery перед написанной вами функцией.

Второй шаг

Если вам нужно внедрить класс в некоторый элемент с помощью jQuery, самый простойспособ сделать это:

Вместо ...

$('.page').attr('class', 'page examples');

Изменить на ...

$('.page').addClass('examples');

В этом примере выше, вы можете опустить 'страницу'и пусть только' examples ', потому что класс ".page" уже существует.

Другое дело, это будет работать, только если элемент с классом ".page" уже существует в вашем HTML.

Третий шаг:

Добавить функцию обратного вызова в .load и посмотреть, работает ли она правильно:

$('.page-content').load('includes/page-examples.php', function(){
  alert("Nice, my content was loaded!");

  // You can put this action here, so it will execute after the content is loaded
  window.scrollTo(0, 0);
});