Disable click event with jQuery

Question

My question is related about disabling links/click events with jQuery, and it's probably easier than it seems to me. I commented the important code to make it easier.

I have the following code in a .js file:

$('.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.');

});

And In my HTML I have some list items like these:

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

As you can see, I tried two methods to disable the click event:

Method 1: I tried the following method: how to unbind all event using jquery

Result: It works, unbinding the click event from the anchors with delete-answer class, but:

1) It only deactivate the anchors with delete-answer class. I will prefer to disable all links while the servlet is doing it's stuff.

2) I can't (or I don't know how to) re-enable the links.

Method 2: I tried the following method: How do I dynamically enable/disable links with jQuery?

Result: It works for normal anchors, but not for the anchors with class delete-answer.

Both seem incompatible, so I'd really appreciate some help.

---

Note: also tried to change the class doing this: $('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

It changes the class and leaves the anchors only with delete-disabled class, but when I click them again, they're still deleting the message and I don't know why :/

Answer 1

Use the following code to do it:

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