Comment détacher un événement (fonction) jquery d'un élément

Question

Je veux supprimer cet événement de clic si ma requête ajax est réussie :

  $('.el a').live('click', function(event){
    event.preventDefault();

    $.ajax({
      url: $(this).attr('href'),
      type: 'GET',      
      success: function(response){

         // how to detach this function here? (the live click event)
      }
    });
  });

Answer 1

Votre problème est que live n'est pas lié à un ensemble spécifique d'éléments, il est lié aux éléments qui correspondent à un sélecteur particulier au moment où le clic se produit. Cela signifie que vous ne pouvez pas utiliser unbind o off pour empêcher le clic de déclencher le gestionnaire.

Vous pouvez toutefois modifier légèrement votre sélecteur pour exclure les éléments ayant une certaine classe, puis ajouter cette classe à l'indicateur live d'ignorer votre élément :

$('.el a:not(.been-clicked)').live('click', function(event){
  event.preventDefault();

  var $this = $(this);
  $.ajax({
    url: $this.attr('href'),
    type: 'GET',      
    success: function(response){
      $this.addClass('been-clicked');
    }
  });
});

Démonstration de la technique : http://jsfiddle.net/ambiguous/Deh5j/

---

Greg Pettit a raison de dire dans les commentaires que live ne devrait plus être utilisé si vous utilisez jQuery 1.7 et est quelque peu désapprouvé même en 1.6. Il est généralement préférable d'utiliser delegate avant 1.7 et on si vous utilisez la version 1.7 :

$(document).on('click', '.el a:not(.been-clicked)', function() {
  //...
});

Vous ne pouvez toujours pas utiliser unbind o off pour arrêter cette version de on (sauf dans des circonstances très étroites, comme par exemple si vous n'avez qu'un seul élément qui correspond à .el a et vous n'avez qu'un seul gestionnaire de clics attaché (ou si vous utilisez une fonction nommée)). Vous avez toujours besoin de quelque chose comme l'astuce ci-dessus "ajouter une classe comme un drapeau" si vous utilisez le style de liaison "en direct", si vous vous liez à un ensemble spécifique d'éléments qui existent lorsque vous liez votre gestionnaire de clics, alors vous ne devriez pas utiliser la fonction live du tout, vous devriez utiliser l'un des bind , click o on pour lier un gestionnaire à ces éléments spécifiques, puis vous pouvez utiliser la fonction unbind o off pour détacher les gestionnaires. Ou mieux, vous pouvez simplement utiliser one et laisser jQuery s'occuper de détacher le gestionnaire.

Answer 2

Je pense que vous voulez :

.unbind("click");

ou en jQuery 1.7+.

.off("click");

Remarque : cela supprimera le click de l'élément cliqué ; si vous voulez empêcher les éléments nouvellement créés d'avoir un événement de clic (c'est-à-dire désactiver l'événement live() ), vous voudrez plutôt faire :

$('.el a').die("click");

Answer 3

Cela peut être fait par l'utilisation de .unbind() mais vous ne pouvez pas utiliser this à l'intérieur de la fonction de succès de la classe ajax, car elle fera référence à un objet différent de l'élément sur lequel vous avez cliqué, provenant d'une fonction de rappel, créez plutôt une variable stockant l'élément sur lequel vous avez cliqué ; j'ai utilisé elem dans ce cas et l'utiliser pour délier votre événement de clic sur le succès $(elem).unbind('click');

~~$('.el a').live('click', function(event){ event.preventDefault(); var elem = this;

    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',      
        success: function(response){
            $(elem).unbind('click');
        }
    });
});~~ 

Modifier : @mu est trop court a fait remarquer que dans les versions antérieures à la 1.7 il est plus difficile qu'il ne devrait être de tuer un événement fixé par .live() et son exemple

Answer 4

Utiliser la fonction de déverrouillage http://api.jquery.com/unbind/