jquery undelegate click event after event has completed

Question

Hi,

I have a click event that animates in some AJAX content onto a page.

Once this content has been revealed and a user clicks the same link that activated the process i now want to reverse the process and close the currently open fly out content.

At the moment the currently open fly out is closed either by clicking a 'close' link or clicking another fly out link in the sequence. If a user clicks the current fly out link then i want the current fly out to close.

// 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

On a fly-out click, test to see if the menu has the class current. If it does, close the flyout and don't run the ajax method.

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

Answer 2

.delegate() checks the selector each time it gets an event, so you could do this:

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

Then in your close delegate listen for this new selector as well:

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

By adding the foClose class (or whatever you wish to name it) the button's click event would be handled by the closing delegate listening, rather than opening one. If it's clicked and handled that way, it'll remove the foClass, making it a flyout link again.