Jquery remove and add back click event

Question

Is it possible to remove than add back click event to specific element? i.e

I have a ~~$("#elem").click(function{//some behaviour});,~~ $(".elem").click(function{//some behaviour});(there are more than 1 element) while my other function getJson is executing I'd like to remove the click event from the #elem, and add it again onsuccess from getJson function, but preserve both mouseenter and mouseleave events the whole time?

Or maybe create overlay to prevent clicking like in modal windows? is that better idea?

edit :

I've seen some really good answers, but there is one detail that I omitted not on purpose. There are more than one element, and I call the click function on the className not on elementId as I stated in the original question

An initial if-statement inside the event handler might check whether a boolean `jsonIsLoaded` is true or not. If it is, then set it to `false` and continue, otherwise you call `event.preventDefault()` and return false. That way you don't have to bind and unbind events all the time! — Alexander Wallin, Feb 02 '11 at 22:45
`function` must be followed by a set of parentheses, optionally receiving the click event as a parameter: `function(evt){ ... }`. Regarding your update: should _all_ elements be unclickable, or just the one clicked? — Alexander Wallin, Feb 02 '11 at 23:00
@afEkenholm tnx for your feedback, only the one being clicked — London, Feb 02 '11 at 23:09

Frédéric Hamidi · Accepted Answer · 2011-02-02T23:20:14.380

6

Rather than using unbind(), which means you'll have to rebind the same event handler later, you can use jQuery's data() facility with the ajaxStart and ajaxStop events to have your elements ignore click events during all AJAX requests:

$(".elem").click(function() {
    if (!$(this).data("ajaxRequestPending")) {
        // some behaviour
    }
}).ajaxStart(function() {
    $(this).data("ajaxRequestPending", true);
}).ajaxStop(function() {
    $(this).removeData("ajaxRequestPending");
});

EDIT: This answer is also id-to-class-proof (see questioner's edit), since everything matching the selector will handle the AJAX events the right way. That's the main selling point of jQuery, and it shows.

edited Feb 02 '11 at 23:20

answered Feb 02 '11 at 22:54

Frédéric Hamidi

258,201
41
486
479

@Frédéric Hamidi but I'm not using ajax function, I'm using getJson also from jquery, or does it also belongs as ajax function? – London Feb 02 '11 at 23:11
@London, [$.getJSON()](http://api.jquery.com/jQuery.getJSON/) calls [$.ajax()](http://api.jquery.com/jQuery.ajax/) internally, so it actually *is* an AJAX function, and triggers `ajaxStart` and `ajaxStop` as expected. – Frédéric Hamidi Feb 02 '11 at 23:18
@Frédéric Hamidi absolutely simple,amazing, briliant – London Feb 02 '11 at 23:26
@Frédéric Hamidi one more thing, it works exactly as I wanted – London Feb 02 '11 at 23:38

score 2 · Answer 2 · answered Feb 02 '11 at 22:39

2

You are looking for .unbind(). Pass it 'click' and it will destroy the click event.

I would put it just before your getJSON and re-bind the click event inside the success handler of your ajax call.

answered Feb 02 '11 at 22:39

jondavidjohn

61,812
21
118
158

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

You have to do some additional scripting. There is no callback for that. Take a look over here: jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

edited May 23 '17 at 11:43

Community

1
1

answered Feb 02 '11 at 22:38

gearsdigital

13,915
6
44
73

score 0 · Answer 4 · answered Feb 02 '11 at 22:46

Rather than unbinding/binding the click event, you could check the state of another variable to see if it should do the action.

var MyObject = {
  requestActive = false;
};

function MyJsonFunction() {
  // when requesting
  MyObject.requestActive = true;
  //...
  // when request over
  MyObject.requestActive = false;

}

$("#elem").click(function{
  if (MyObject.requestActive == true) {
    //do something
  }
});

Jquery remove and add back click event

4 Answers4