jQuery référence à (cela) ne fonctionne pas?

Question

Je possède ce lien href avec le texte soit « attivo » ou « non attivo »
L'utilisateur peut définir l'élément à « actif » ou « fermé » dans la base de données avec une demande ajax .post de $()

I ont 2 questions pour ces:

1. Je ne peux pas obtenir la référence à $ (cela) pour travailler .. Je l'ai essayé avec un lien normal et il fonctionne, mais pas enveloppé dans if/else ?? Comment puis-je empêcher l'utilisateur de cliquer plus d'une fois sur le lien et de soumettre plusieurs demandes? Est-ce une préoccupation valable? Ai-je besoin d'une sorte de minuterie ou autre chose?
   D'abord, je pensais à un message de confirmation javascript, mais c'est assez ennuyeux pour cette fonction ..

HTML:

<dl id='album-list'> 
<dt id="dt-2">some title</dt> 
<dd id="dd-2"> 
    some description<br /> 
    <div class='links-right'>status: <a class='toggle-active' href='#'>non attivo</a></div> 
</dd> 
</dl> 

<a class="test" href="#">test</a> 

JS:

 $('dd a.toggle-active').click(function() { 
      var a_ref = $(this); 
      var id = a_ref.parent().parent().attr('id').substring(3); 
      if (a_ref.text() == "non attivo") { 
       var new_active = "active"; // for db in english 
       $.post("ajax-aa.php", {album_id:id, album_active:new_active}, 
       function(data) { 
        // alert("success"); 
        a_ref.text("non attivo"); // change href text 
       }); 
      } else {     
       var new_active = "closed"; // for db in english 
       $.post("ajax-aa.php", {album_id:id, album_active:new_active}, 
       function(data) { 
        // alert("success"); 
        a_ref.text("attivo"); // change href text 
       }); 
      } 
      return false; 
     });  

     $('a.test').click(function() { 
      var a_ref = $(this); 
      $.post("ajax-aa.php", {album_id:2, album_active:"active"}, 
      function(data) { 
       a_ref.text("changed"); 
      }); 
      return false; 
     }) 

Answer 1

$ (this) devrait se référer à votre élément dans le if/else, mais pas à l'intérieur de la fonction de rappel. La fonction de rappel est exécutée dans un contexte différent, donc dans la fonction de rappel

function(date) { } 

this ne se réfère pas à l'élément. this à l'intérieur de la fonction de rappel n'est pas la même que this en dehors de la fonction de rappel. Étant donné que la fonction de rappel est une fermeture, elle conservera une référence à votre variable locale a_ref.

Pour empêcher l'utilisateur de cliquer deux fois, ajouter une classe à l'élément

$(this).addClass("hasbeenclicked") 

et dans le gestionnaire de clic vérifier si cela a été défini et ne pas faire quoi que ce soit quand il a:

if (! $(this).is(".hasbeenclicked")) { 
    .... 
    } 

Answer 2

La manière la plus simple d'arrêter plusieurs fois l'utilisateur en cliquant sur le lien sera d'ajouter une classe ou quelque chose au lien lorsque l'utilisateur clique dessus.

a_ref.addClass('in-progress'); 

puis de supprimer la classe lorsque la requête AJAX est terminée. Lorsque l'utilisateur clique pour la première fois sur le lien, vérifiez si une requête est en cours;

if (a_ref.hasClass('in-progress')) { 
    return' 
}; 

Edit: Un exemple plus détaillé:

$('a.test').click(function() { 
    var a_ref = $(this); 


    if (a_ref.hasClass('in-progress')) { 
     return false; 
    } else { 
     a_ref.addClass('in-progress'); 
    } 

    $.post("ajax-aa.php", {album_id:2, album_active:"active"}, 
    function(data) { 
     a_ref.text("changed").removeClass('in-progress'); 
    }); 

    return false; 
})