事件完成后jquery取消委托点击事件答案

【问题标题】：jquery undelegate click event after event has completed事件完成后jquery取消委托点击事件
【发布时间】：2010-08-18 15:16:24
【问题描述】：

我有一个点击事件，它可以将一些 AJAX 内容动画到页面上。

一旦显示此内容并且用户单击激活该过程的同一链接，我现在想要反转该过程并关闭当前打开的飞出内容。

当前打开的飞出通过单击“关闭”链接或单击序列中的另一个飞出链接关闭。如果用户点击当前飞出链接，那么我希望当前飞出关闭。

// Close fly out function
function closeFlyout() {

    $('.fly_container').animate({
        'right': '-332'
    }, 300, 'swing', function() {
        $(this).detach();
        /* TODO: z-index issues in IE7, IE6
        $('.dark_overlay').fadeOut(300, function() {
        $(this).remove();
        });
        */
    });

};

$('.widget').delegate('.widget .fly_out', 'click', function() {

    /*  
    TODO: z-index issues in IE7, IE6
    $('body').prepend('<div class="dark_overlay" />');
    */

    var $widget = $(this).closest('.widget');

    var $flyOutIndex = $(this).index('.fly_out');

    if ($flyOutIndex == 0) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/Priceassessment/product_order.htm';
    } else if ($flyOutIndex == 1) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_comparisons.htm';
    } else if ($flyOutIndex == 2) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_scenarios.htm';
    } else if ($flyOutIndex == 3) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_analysis.htm';
    }

    $('.current').removeClass('current');

    $(this).addClass('current');

    // Close any open flyouts
    closeFlyout();

    $.ajax({
        type: 'GET',
        url: DashboardApplicationRoot + $flyOutURL,
        dataType: 'html',
        cache: true,
        success: function(data) {

            $($widget).prepend(data);

            $('.fly_container').animate({ 'right': '0' }, 300);

            $('.scroll').jScrollPane();

            $('.striped li:nth-child(even)').addClass('odd');

        }
    });

    return false;

});

// Close fly out function
$('.widget').delegate('.fly_container .close', 'click', function() {

    closeFlyout();

    $('.current').removeClass('current');

    return false;

});

【问题讨论】：

标签： jquery animation click event-delegation

【解决方案1】：

.delegate() 每次收到事件时都会检查选择器，因此您可以这样做：

$('.widget').delegate('.widget .fly_out:not(.foClose)', 'click', function() {
  $(this).addClass('foClose');
  //rest of current code
});

然后在你的关闭委托中也监听这个新的选择器：

$('.widget').delegate('.fly_container .close, .widget .foClose', 'click', function() {
  $(this).removeClass('foClose');
  //rest of current code
});

通过添加foClose 类（或您希望命名的任何名称），按钮的单击事件将由关闭代理侦听处理，而不是打开代理。如果以这种方式单击并处理它，它将删除foClass，使其再次成为弹出链接。

【讨论】：

如果点击不是当前链接的链接，我如何使用相同的代码等到当前飞出打开后再打开新飞出？
@RyanP13 - 您想将它们排入队列，还是在工作时忽略其他.fly_out 点击？

【解决方案2】：

在弹出式单击中，测试菜单是否具有 current 类。如果是，请关闭弹出窗口并且不要运行 ajax 方法。

if ($(this).hasClass("current")) { 
    $(this).removeCLass("current"); 
    closeFlyout(); 
    return; 
}

【讨论】：