Якорный щелчок даже не срабатывает после загрузки страницы PJAX

У меня довольно странная проблема с веб-сайтом, с которым я возился, и я не могу понять, что может быть не так. Я использую PJAX на сайте, и в моем теле есть div с идентификатором #page-contents.

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

<script type="text/javascript">
    $(function(){
        $(document).pjax('a', '#page-contents', {
            fragment: '#page-contents',
            timeout: 2000
        });
    });
</script>

Я знаю, что установка правильная, потому что я отредактировал файл PJAX так, чтобы он вызывал оповещение всякий раз, когда он заменял содержимое моего #page-contents div, и я вижу это оповещение, когда я этого ожидал (т. е. при переходе по ссылке).

У меня есть панель навигации вверху (панель навигации начальной загрузки), и у меня изначально были проблемы с отслеживанием того, какой элемент панели навигации будет помечен как активный. Я решил эту проблему, используя следующий код javascript.

<script type="text/javascript">
    $("a").click(function() {
        $(".navbar-nav li").removeClass("active");

        var nextPage = $(this).attr("href");
        nextPage = nextPage.substring(nextPage.indexOf(window.location.hostname) + window.location.hostname.length);
        switch(true) {
            case nextPage == "/about":
                $("#about-nav").addClass("active");
                break;
            case nextPage == "/contact":
                $("#contact-nav").addClass("active");
                break;
            case nextPage == "/resume":
                $("#resume-nav").addClass("active");
                break;
            case nextPage.indexOf("/projects") != -1:
                $("#projects-nav").addClass("active");
                break;
            default:
                break;
        }
    });
</script>

Это отлично работает для всех ссылок, которые у меня есть на моей панели навигации, но я обнаружил, что любые ссылки, которые у меня есть внутри моего #page-contents div, не будут запускать мой вышеприведенный скрипт. Я знаю, что PJAX все еще работает, поскольку страница изменяется и отображается предупреждение, которое я вставил.

Несколько вещей, которые я нашел в своем собственном тестировании:

  • Я также обнаружил, что если я напрямую загружу адрес, содержащий ссылку, не являющуюся панелью навигации, а затем щелкну эту ссылку, это сработает. Но возвращение на эту страницу через перезагрузку pjax, а затем нажатие на ссылку не приведет к срабатыванию моего события.
  • Добавление тестового класса к одному из моих якорей, а затем связывание некоторого события с этим классом имеет те же проблемы.

Кто-нибудь знает, почему мой скрипт не будет выполняться? Или, может быть, я просто упускаю что-то очевидное.

Заранее спасибо!

PS: Рассматриваемый веб-сайт является моим личным сайтом, над которым я работаю, ссылка http://rosshays.me, Страница, на которой я впервые заметил это, была моя страница о нас. (Сайт находится в стадии разработки, как вы ясно увидите.) Как уже упоминалось, переход на страницу «О нас» напрямую и нажатие на ссылку будут работать, но если вы перейдете на страницу «О нас», а затем попытаетесь щелкнуть ссылку в страницу, это не сработает.


javascript web pjax
person Ross Hays    schedule 23.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Росс-

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

Поместите свою функцию во внешний файл .js. После завершения вы можете добавить этот скрипт в свой заголовок:

$(document).on('pjax:complete', function() {
            $.ajaxSetup({ cache: true});
            $.getScript("YOUR SCRIPT FILE PATH HERE', true);?>");                           
            });

Вам нужно будет добавить больше $.getScript вызовов для любого другого javascript/jQuery, необходимого для включения событий, которые вы хотите иметь. (Пример: вам может потребоваться перезагрузить jQuery)

Это повторно применит jquery и javascript к новым элементам, загружаемым через PJAX.

*Одно замечание: если вы используете twitter bootstrap, не вызывайте повторно скрипт начальной загрузки с помощью $.getScript, так как он будет отменяться при каждой повторной загрузке.

person Mussser    schedule 18.04.2014