Geek Answers Handbook

Disable click event using jQuery

My question is about disabling click links / events using jQuery, and this is probably simpler than it seems to me. I commented on 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 unleash all events using jquery

Result: it works by detaching the click event from the anchors with the delete-answer class, but:

1) It deactivates anchors only with the delete-answer class. I prefer to disable all links while the servlet is doing this.

2) I cannot (or do not know how) to re-enable links.

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

Result: it works for regular anchors, but not for anchors with the delete-answer class.

Both seem incompatible, so I really appreciate some help.

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

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

+4
source share
5 answers

Wrap all this code in a function and use the flag.

  • Add this at the top:

     (function() {

  • Add this below:

     })();

  • Under the top line above add:

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

  • In the click handler at the top:

     if (!deleteAnswerEnabled) { return false; }

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

Putting it 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 feel rather paranoid, you can use a counter rather than a logical one, but the concept is the same.

+2
source

To do this, use the following code:

 $('a').bind('click', false);
+2
source

Define a separate variable that tracks your deletion status:

 var isDeleting = false; $('.delete-answer').click(function(event) { if (!isDeleting) { isDeleting = true; $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { isDeleting = false; }); } });

In addition, you do not need the href attribute inside the anchor if it does not actually contain a URL. Just delete it altogether.

+1
source

Another simple solution is to only .hide () /. Show () your click element.

0
source

Since I cannot leave a comment, this is the solution for the Noob question on the Darm post ( LINK ).

I believe that the page uses what .bind was implemented if two .binds are used for the same element. Therefore, you need .unbind first if you want to change the FALSE parameter to TRUE . To enable the click again, add the last code to the function / event that you would like to re-enable.

DISABLE

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

RE-TURN ON

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

ALSO , I am not sure why, returning to TRUE will not work if I did not enable "jquery-ui.js".

Hope this helps

0
source

More articles:


All Articles