jQuery 事件委托和 PJAX 事件不起作用

Question

我有一个带有菜单切换 div 的 Rails 3.2 应用程序，用于显示水平导航菜单。单击后退或前进按钮后，单击 div 不再切换菜单。我已尝试使用事件委托和 pjax 事件来解决此问题，但似乎没有任何效果。

当不使用事件委托和/或 pjax 事件时，切换在完全刷新和 pjax 请求时正常工作，但在后退/前进按钮上会中断。当我在不同的组合中添加委托或 pjax 事件时，就会出现问题。这是我尝试过的几个不同的脚本。我得到了非常奇怪的结果，有时工作而不是其他人......我担心我可能没有正确组合它们。这些都包含在特定视图上的脚本标签中，而不是在 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');
  });
});

Answer 1

我已将事件委托脚本移至 document ready 中的 application.js。

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

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

});