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 :/
Use the following code to do it:
$('a').bind('click', false);