Disabilita evento click con jQuery

Question

La mia domanda è legata sulla disattivazione collegamenti / cliccare eventi con jQuery, ed è probabilmente più facile di quanto mi pare. Ho commentato il codice importante per rendere più facile.

Ho il seguente codice in un file .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.');

});

E Nel mio HTML Ho alcuni elementi di una lista come questi:

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

Come potete vedere, ho provato due metodi per disabilitare l'evento click:

Metodo 1: I provato il seguente metodo: come svincolare tutti gli eventi utilizzando jQuery

Risultato: Funziona, non associare l'evento click dalle ancore con classe delete-risposta, ma:

1) disattivare solo le ancore con classe delete-risposta. Io preferisca disabilitare tutti link mentre il servlet sta facendo di essa la roba.

2) non posso (o non so come) riattivare i collegamenti.

Metodo 2: Ho provato il seguente metodo: Come faccio in modo dinamico ad attivare / disattivare i collegamenti con jQuery?

Risultato:. Funziona per ancoraggi normali, ma non per le ancore con classe di delete-risposta

Entrambi sembrano incompatibili, quindi mi piacerebbe davvero apprezzare qualche aiuto.

---

Nota: ha anche cercato di cambiare la classe a fare questo: $('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

Si cambia la classe e lascia le ancore solo con delete disabile di classe, ma quando clicco di nuovo, sono ancora l'eliminazione del messaggio e non so perché: /

Answer 1

Wrap all of that code in a function and use a flag.

1. Add this at the top:

   (function() {
   

2. Add this at the bottom:

   })();
   

3. Just under the top line above, add:

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

4. In your click handler, right at the top:

   if (!deleteAnswerEnabled) {
       return false;
   }
   

5. Change your post to:

   // 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;
   });
   

Bringing that all together:

// (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)
})();

If you're feeling sufficiently paranoid, you might use a counter rather than a boolean, but the concept is the same.

Answer 2

Use the following code to do it:

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

Answer 3

Define a separate variable that keeps track of your deleting state:

var isDeleting = false; 

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

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

Also, you don't need an href attribute inside the anchor if it doesn't actually contain a URL. Just remove it altogether.

Answer 4

Another simple solution is just .hide() / .show() your click element.

Answer 5

Since I can't leave a comment, this is solution for Noob's question on Darm's post (LINK).

I believe the page uses whichever .bind was first implemented if two .binds are used for the same element. So you have to .unbind it first if you want to change the setting from FALSE to TRUE. To re-enable the click add the latter code to whichever function/event you would want to re-enable it.

DISABLE

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

RE-ENABLE

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

ALSO, I'm not sure why, setting back to TRUE wouldn't work unless I included "jquery-ui.js".

Hope this helps