Enable/Disable Click event for element using jQuery

Question

I want Enable/Disable click event on element. I have following code...

HTML:

<a id="CP" style="cursor: pointer; text-decoration: underline;">Current Processes</a>

jQuery:

$(document).on("click", "#CP", function(event) {
    $this = $(this);
    $this.click(function() {
        return false;
    });
    $this.html("Processing...").css({
        "text-decoration": "none",
        "cursor": "default"
    });
    $.ajax({
        type: 'post',
        url: 'abc.jsp',
        success: function(process) {
            //My code goes here...
            $this.on("click"); //  Here i want to bind or add handler which is fired previously.
        }
    });
});

set href="#" and remove that cursor: pointer . You're using an anchor like a div — steo
– steo, Commented Jul 3, 2013 at 11:55
why do you want to do that? is it you only want to register the event once? if that is the case then you can use the one event api.jquery.com/one — Qpirate
– Qpirate, Commented Jul 3, 2013 at 11:55

Jeroen Bellemans · Accepted Answer · 2015-11-16 21:26:20Z

15

If I understand well, you could do that very simple with the following:

$this.html("Processing...").css({
    "cursor": "wait",
    "pointer-events": "none"
});

answered Nov 16, 2015 at 21:26

Jeroen Bellemans

2,0352 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ruslanas Balčiūnas · Accepted Answer · 2015-05-09 22:43:37Z

7

Add some class when performing AJAX request. Remove when done. Do nothing if link has this class.

$(document).on("click", "#CP", function(event) {
    event.preventDefault();
    $a = $(this);
    if($a.hasClass('disabled')) {
        return false;
    }

    $a.html("Processing...").addClass('disabled');
    $.ajax({
        type: 'post',
        url: 'abc.jsp',
        success: function(process) {
            $a.removeClass('disabled');

            // restore inner HTML here
        }
    });
});

answered May 9, 2015 at 22:43

Ruslanas Balčiūnas

7,4563 gold badges27 silver badges42 bronze badges

Comments

mishik · Accepted Answer · 2013-07-03 11:51:27Z

0

$this.on("click") - this is effectively: "bind click handler to $this that will do nothing"

To trigger an event use: $this.click() or $this.trigger("customEvent")

answered Jul 3, 2013 at 11:51

mishik

10k9 gold badges48 silver badges69 bronze badges

Comments

Stanley Amos · Accepted Answer · 2013-07-03 12:22:29Z

0

May be you should use bind("click") so you can as well unbind it. e.g $("#CP").bind("click",function(){..function to run // disable the click event from CP $("#CP").unbind("click"); });. Good luck!

answered Jul 3, 2013 at 12:22

Stanley Amos

3322 silver badges9 bronze badges

Comments

yogesh suhagiya · Accepted Answer · 2014-09-05 09:50:00Z

0

var eventhandler = function() {

    $(document).unbind("click");
    $this.html("Processing...").css({
        "text-decoration": "none",
        "cursor": "default"
    });
    $.ajax({
        type: 'post',
        url: 'abc.jsp',
        success: function(process) {
            //My code goes here...
            //Here i want to bind or add handler which is fired previously.
            $(document).click(eventhandler); 
        }
    });
}


jQuery(document).click(eventhandler);

answered Sep 5, 2014 at 9:50

yogesh suhagiya

4982 gold badges6 silver badges20 bronze badges

Comments

adiga · Accepted Answer · 2019-06-28 13:04:00Z

0

Perhaps you were faced with a common problem when you’re using javaScript to submit a form, the form data is submitted multiple times if the submit button is clicked multiple times. To solve this issue you only need to write one line code with help CSS.

document.getElementById("form1").style.pointerEvents="none";

edited Jun 28, 2019 at 13:04

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jun 28, 2019 at 12:53

Rohan

412 bronze badges

Collectives™ on Stack Overflow

Enable/Disable Click event for element using jQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related