區分PJAX事件

Question

我的pjax工作正常，但我需要在不同的pjax事件上做不同的事情。這裏是我的pjax：

//MainMenu 
$(document).pjax('.menu li a', '.pjax_submenu', { fragment: '.pjax_submenu', timeout: 5000}); 

//SubMenu 
$(document).pjax('.submenu li a', '.submenu', { fragment: '.submenu', timeout: 5000 }); 

Basicly我有這兩個menues，並希望做pjax:start和pjax:end東西。不幸的是，這些事件總是被稱爲。例如： -

$("body").on("pjax_event", ".pjax_submenu", function(e, category){ 
    $(document).on('pjax:start', function() { 
     if(category === 1){ 
      $('.pjax_submenu').fadeOut(500); 

     } else{ 
      $('.info').slideUp(500); 

     } 
    }); 
    $(document).on('pjax:end', function() { 
     if(category === 1){ 
      $('.pjax_submenu').hide().fadeIn(500); 
     } else{ 
      $('.info').hide().slideDown(500); 
     } 
    }); 
}); 

$("body").on("click", ".menu li a", function() { 
    $(".pjax_submenu").trigger("pjax_event", 1); 
}); 
$("body").on("click", ".submenu li a", function() { 
    $(".pjax_submenu").trigger("pjax_event", 2); 
}); 

如果我點擊菜單或子菜單鏈接不要緊，結果是所有pjax代碼的執行。 即使我不喜歡這樣寫道：

$("body").on("click", ".menu li a", function() { 
    $(document).on('pjax:start', function() { stuff } 
    $(document).on('pjax:end', function() { stuff } 
}); 
$("body").on("click", ".submenu li a", function() { 
    $(document).on('pjax:start', function() { stuff } 
    $(document).on('pjax:end', function() { stuff } 
}); 

它仍然執行>既<，我似乎無法讓我的頭圍繞一個方法來區分不同的被點擊項目pjax事件。

我想要做的是淡化主菜單上的內容，並使用slideUp/Down作爲子菜單信息框。

告訴我，如果您需要任何額外的信息，每一個幫助表示讚賞！

Answer 1

我想分享我的解決方案，它不太漂亮 - 但它的作品奇妙！它也是我發現的唯一解決方案...

您將需要可讀的pjax版本！

搜索「pjax：end」的pjax.js。添加下面的paragrpah：

fire('pjax:end', [xhr, options]) 

if(options.menu == 'main'){ 
    fire('pjax:main:end', [xhr, options]) 
}else if(options.menu == 'sub'){ 
    fire('pjax:sub:end', [xhr, options]) 
} 

與pjax相同：start！

您可以再與你的聲明鏈接pjax：

//MainMenu 
$(document).pjax('.menu li a', '.pjax_submenu', {menu: 'main',fragment:'.pjax_submenu', timeout: 5000}); 
//SubMenu 
$(document).pjax('.submenu li a', '.submenu', { menu: 'sub',fragment: '.submenu', timeout: 5000 }); 

，瞧你有獨立的事件：

//... for Main Menu 
$(document).on('pjax:main:start', function() { 
    console.log('pjax:main:start'); 

}); 

$(document).on('pjax:main:end', function() { 
    console.log('pjax:main:end'); 

}); 

//... for Sub Menu 
$(document).on('pjax:sub:start', function() { 
    console.log('pjax:sub:start'); 

}); 
$(document).on('pjax:sub:end', function() { 
    console.log('pjax:sub:end'); 

    $('.info') .slideDown(500); 
}); 

希望這可以幫助別人的未來！ 乾杯！