区分 PJAX 事件

distinguishing between PJAX Events

本文关键字：事件 PJAX 区分      更新时间：2023-09-26

我的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 });

基本上我有这两个菜单，想在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事件。

我想做的是淡化主菜单点上的内容，并对子菜单信息框使用幻灯片上/下。

如果您需要任何其他信息，请告诉我，非常感谢您的帮助！

我想分享我的解决方案，它不是太漂亮 - 但它的效果很棒！这也是我找到的唯一解决方案...

您将需要可读的 pjax 版本！

搜索 pjax.js 搜索 "pjax：end"。在下面添加参数：

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：开始也是如此！

然后，您可以使用以下命令声明 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);
});

希望这对将来的某人有所帮助！干杯！

相关文章：