jquery undelegate click event после завершения события

Question

У меня есть событие click, которое анимируется в каком-то контенте 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; 

}); 

Answer 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, сделав его ссылкой для всплывающих окон.

Answer 2

На лету из мыши, тест, чтобы увидеть, если меню имеет класс current. Если это так, закройте всплывающее окно и не запустите метод ajax.

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