0

Такая проблема - использую на сайте barba js - типа скрипт для осуществления переходов между страницами посредством ajax.

Проблема в том, после загрузки контента аяксом не срабатывают скрипты которые добавлены в head. Не понимаю, как заставить все работать. Пробовал через .on('click') запускать в ручную функции, что кажется бредовым, но не работает, скрипты врубаются если внутри функции on click сделать setTimout, то есть нажал на ссыль, через секунду запустилась функция, тогда все ок, но это же бред, во первых задержка, во вторых все функции вручную запускать - это же жесть.

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

Весь инет облазил - все советуют отложенное навешивание событий - on, но какое тогда должно быть событие (какое событие после аякс вызова)? Если на клик, то выше описал, что только с таймаутом работает.

0

2 ответа 2

0

Нужен live-биндинг. Пример:

$(document, window)
  .off("click", ".target")
  .on("click", ".target", function(e) {
    // TODO
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3
  • Спасибо за ответ! Это получается что нужно все вручную переинициализировать?
    – DexColt
    18 авг 2017 в 14:35
  • Объявите функцию внутри jQuery. И просто через замену замените все .on на .liveBind, например. $.fn.liveBind = function... Думаю дальше разберётесь. :)
    – SlyDeath
    18 авг 2017 в 14:38
  • Спасибо за помощь!
    – DexColt
    18 авг 2017 в 14:46
0

JS событийный язык. Скрипты в <head> запускаются до появления контента. Рабочий вариант будет с функцией-оберткой. Например:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    function headInit(){
      // Здесь твой код
      // различные обработчики и т.п.
      console.log('Скрипты в head');
    }
    </script>
</head>
<body>
<header>
<a href="#" id="load-content">Загрузить контент</a>
</header>
<div id="ajax-content"></div>
<script>
(function($){
  // Обработчик клика по ссылке загрузки
  // можно любое событие
  // хоть $(window).load()
  $(document).on('click','#load-content',function(){
    // параметры запроса
    var postData = {
      action: 'ajax_load',
      param1: '' // любые параметры
    };
    
    // Обработчик успешного выполнения запроса
    var successFunc = function(response){
      // Если сервер выдает сразу разметку
      // вставим разметку в блок
      $('#ajax-content').html(response); 
      // и после этого запустим функцию-обертку из head 
      headInit();
    };
    // собственно сам запрос
    $.ajax({
      url: '/',
      method: 'POST',
      data: postData,
      success: successFunc
    });
    return false;
  });
})(jQuery);
</script>
</body>
</html>

Правильным образом навешивайте обработчики событий, не

`$('.link').click(callbackFunc)` 

, а

`$(document).on('click', '.link', callbackFunc)`
2
  • Спасибо за ответ. Но $(document).on('click', '.link', callbackFunc) ведет себя странно, он какбы совершает функцию в момент клика, а только потом подгружается новый контент, я выше описал, если ставить таймаут, то контент успевает подгрузиться и все срабатывает.
    – DexColt
    18 авг 2017 в 15:02
  • Покажи пример кода, так легче понять проблему. А вообще лучше все скрипты перед </body> ставить
    – MaxKut
    18 авг 2017 в 15:09

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.