Делегирование событий jQuery и события PJAX не работают

У меня есть приложение Rails 3.2 с переключателем меню div для отображения горизонтального навигационного меню. После нажатия кнопки «Назад» или «Вперед» щелчок по элементу div больше не переключает меню. Я пытался использовать делегирование событий и события pjax, чтобы решить эту проблему, но, похоже, ничего не работает.

Когда делегирование событий и/или события pjax не используются, переключатель работает корректно при полном обновлении и запросах pjax, но прерывается при нажатии кнопки «назад/вперед». Когда я добавляю события делегирования или pjax в разные комбинации, возникают проблемы. Вот несколько разных сценариев, которые я пробовал. Я получаю очень странные результаты, иногда работаю, а иногда нет... Меня беспокоит, что я, возможно, неправильно их комбинирую. Все они заключены в теги script в конкретном представлении, а не в application.js. Спасибо за вашу помощь!

<сильный>1. Нет делегирования событий, работает только назад/вперед

$(document).ready(function() {
  $('.menu-toggle').on('click', function () {
    $('.menu-toggle').toggleClass('menu-toggle-open');
    $('.menu-wrap').toggleClass('menu-open');
  }); 
});

<сильный>2. С делегированием событий работает ИНОГДА, но не для переадресации/назад

$(document).ready(function() {
  $(document).on('click', '.menu-toggle', function () {
    $('.menu-toggle').toggleClass('menu-toggle-open');
    $('.menu-wrap').toggleClass('menu-open');  
  });
});

<сильный>3. Событие pjax:end внутри документа готово

$(document).ready(function() {
  $('.menu-toggle').on('click', function () {
    $('.menu-toggle').toggleClass('menu-toggle-open');
    $('.menu-wrap').toggleClass('menu-open');    
  }); 


  $(document).on('pjax:end', function() {
    $('.menu-toggle').on('click', function () {
      $('.menu-toggle').toggleClass('menu-toggle-open');
      $('.menu-wrap').toggleClass('menu-open');
    });
  });
});

<сильный>4. Готовый внешний документ pjax:end

$(document).ready(function() {
  $(document).on('click', '.menu-toggle', function () {
    $('.menu-toggle').toggleClass('menu-toggle-open');
    $('.menu-wrap').toggleClass('menu-open');  
  });
});

$(document).on('pjax:end', function() {
  $('.menu-toggle').on('click', function () {
      $('.menu-toggle').toggleClass('menu-toggle-open');
      $('.menu-wrap').toggleClass('menu-open');
  });
});

ruby-on-rails javascript jquery pushstate pjax
person evkline    schedule 01.01.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я переместил делегированный сценарий события в application.js внутри готового документа.

$(document).ready(function(event) {

  $('body').on('click', '.menu-toggle', function () {
    $('.menu-toggle').toggleClass('menu-toggle-open');
    $('.menu-wrap').toggleClass('menu-open');
  });

});
person evkline    schedule 02.01.2014