Désactiver événement click avec jQuery

Question

Ma question porte sur la désactivation des liens / cliquez sur les événements avec jQuery, et il est probablement plus facile que cela me semble. Je commentais le code important pour le rendre plus facile.

J'ai le code suivant dans un fichier .js:

$('.delete-answer').click(function(event) {
    event.preventDefault();

    // some actions modifying the tags    
    $('.output').closest('li').remove();
    var idMsg = ...;
    var action = ...;
    var answers = ...;
    $(this).closest('li').children('p').remove();
    $(this).closest('.tr').before('<tr><td><div class="output">Deleting message...</div></td></tr>');
    $(this).closest('.tr').remove();

    // While the servlet is deleting the message, I want to disable the links
    // but I can't, so my problem is just here

    // METHOD 1
    //$('a').unbind('click');

    // METHOD 2
    //$('a').bind('click', function(e){
    //    e.preventDefault();
    //});

    $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
    });

    // METHOD 1
    //$('a').bind('click');

    // METHOD 2
    //$('a').unbind('click');

    $('.output').empty();
    $('.output').append('Message deleted successfully.');

});

Dans mon HTML j'ai quelques éléments de la liste comme ceux-ci:

<li>
    <p class="text">Some text.</p>
    <table class="answer-details" style="width: 100%">
    <tbody>
        <tr class="tr">
            <td style="width: 50%;">
                <div class="msg-modification" display="inline" align="right">
                    <a id="modify" class="delete-answer" href="#">Delete</a>
                </div>
            </td>
        </tr>                               
    </tbody>
    </table>
</li>

Comme vous pouvez le voir, j'ai essayé deux méthodes pour désactiver l'événement, cliquez sur:

Méthode 1: I a essayé la méthode suivante: comment dissociées événement en utilisant jquery

Résultat: Il fonctionne, déliant l'événement click des points d'ancrage avec la classe de suppression de réponses, mais:

1) Il ne les ancres désactiver avec la classe de suppression-réponse. Je préfère désactiver tous les liens tandis que le servlet le fait de choses.

2) Je ne peux pas (ou je ne sais pas comment) réactiver les liens.

Méthode 2: J'ai essayé la méthode suivante: Comment puis-je activer dynamiquement / désactiver les liens avec jQuery?

Résultat:. Il fonctionne pour les ancres normales, mais pas pour les points d'ancrage avec la classe de suppression-réponse

Les deux semblent incompatibles, donc je vraiment apprécier un peu d'aide.

---

Note: aussi essayé de changer la classe de faire ceci: $('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

Il change la classe et laisse les points d'ancrage uniquement avec classe désactivée suppression, mais quand je clique à nouveau les, ils sont encore supprimer le message et je ne sais pas pourquoi: /

Answer 1

Wrap tous ce code dans une fonction et utiliser un drapeau.

1. Ajoutez cette au sommet:

   (function() {
   

2. Ajoutez cette au fond:

   })();
   

3. Juste sous la ligne supérieure ci-dessus, ajouter:

   // Flag for whether "delete answer" is enabled
   var deleteAnswerEnabled = true;
   

4. Dans votre gestionnaire de clic, tout en haut:

   if (!deleteAnswerEnabled) {
       return false;
   }
   

5. Modifier votre post à:

   // Disable deleting answers while we're doing it
   deleteAnswerEnabled = false;
   $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
        // Enable it again now we're done
       deleteAnswerEnabled = true;
   });
   

Apporter que tous ensemble:

// (1)
(function() {
    // (3)
    // Flag for whether "delete answer" is enabled
    var deleteAnswerEnabled = true;


    $('.delete-answer').click(function(event) {
        event.preventDefault();

        // (4)
        // Don't do it if we're disabled
        if (!deleteAnswerEnabled) {
            return false;
        }

        // some actions modifying the tags    
        $('.output').closest('li').remove();
        var idMsg = ...;
        var action = ...;
        var answers = ...;
        $(this).closest('li').children('p').remove();
        $(this).closest('.tr').before('<tr><td><div class="output">Deleting message...</div></td></tr>');
        $(this).closest('.tr').remove();

        // (5)
        // Disable deleting answers while we're doing it
        deleteAnswerEnabled = false;
        $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
             // Enable it again now we're done
            deleteAnswerEnabled = true;
        });

        $('.output').empty();
        $('.output').append('Message deleted successfully.');

    });
// (2)
})();

Si vous vous sentez suffisamment paranoïaque, vous pouvez utiliser un compteur plutôt que d'un booléen, mais le concept est le même.

Answer 2

Utilisez le code suivant pour le faire:

$('a').bind('click', false);

Answer 3

Définir une variable distincte qui garde la trace de votre état supprimer:

var isDeleting = false; 

$('.delete-answer').click(function(event) {
   if (!isDeleting) {
      isDeleting = true;

      $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
          isDeleting = false;
      });      
   }
});

En outre, vous n'avez pas besoin d'un attribut href dans l'ancre si elle ne contient pas réellement une URL. Il suffit de le supprimer complètement.

Answer 4

Une autre solution simple est juste .hide () / .show () votre élément de clic.

Answer 5

Puisque je ne peux pas laisser un commentaire, c'est la solution pour la question de Noob sur le poste de Darm ( LINK ).

Je crois que la page utilise selon .bind a d'abord été mis en œuvre si deux .binds sont utilisés pour le même élément. Donc, vous devez .unbind en premier si vous voulez changer le réglage de false TRUE . Pour réactiver le clic ajouter le code ci à selon la fonction / événement que vous voulez réactiver.

Désactiver

$('a').bind('click', true);

Réactivez

$('a').unbind('click', false);
$('a').bind('click', true);`

AUSSI , je ne sais pas pourquoi, repassez au TRUE ne fonctionnerait pas si j'inclus « jquery-ui.js ».

Hope this helps