jquery undelegate click событие после завершения события - PullRequest
Новая
       21

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

0 голосов
/ 18 августа 2010

У меня есть событие 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;

});

Ответы [ 2 ]

2 голосов
/ 18 августа 2010

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

1 голос
/ 18 августа 2010

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

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