Evénement de cliquage jquery undelegate après la fin de l'événement

Question

J'ai un événement de clic qui anime un contenu AJAX sur une page.

Une fois que ce contenu a été révélé et qu'un utilisateur clique sur le même lien que celui qui a activé le processus, je veux maintenant inverser le processus et fermer le contenu de sortie actuellement ouvert.

Au moment de la fermeture de l'ouverture actuellement ouverte, vous pouvez soit cliquer sur un lien de fermeture, soit cliquer sur un autre lien de sortie de la séquence. Si un utilisateur clique sur le lien fly out actuel, je veux que le courant s'envole pour se fermer.

// 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() vérifie le sélecteur à chaque fois qu'il reçoit un événement, vous pouvez le faire:

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

Ensuite, dans votre délégué près écouter ce nouveau sélecteur ainsi:

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

En ajoutant la classe foClose (ou ce que vous souhaitez nommer), l'événement click du bouton sera traité par le délégué de clôture qui écoute, plutôt que d'en ouvrir un. Si vous cliquez dessus et que vous le manipulez de cette façon, le foClass sera supprimé, ce qui en fera à nouveau un lien flyout.

Answer 2

Sur un clic fly-out, test pour voir si le menu a la classe current. Si c'est le cas, fermez le menu contextuel et n'exécutez pas la méthode ajax.

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