Preserving current click event jquery

Question

I need to temporarily change the click event for an element as follows:

var originalEvent = '';

$("#helpMode").click(function (e) {
      originalEvent = $("#element").getCurrentClickEventHandler();
      $("#element").click(function (e) {
          //Do something else
      });
});

//Later in the code
$("#helpModeOff").click(function (e) {
      $("#element").click(originalEvent);
});

How would I store the current function that is an event handler in a global variable for later reuse?

EDIT: Here's what im trying to do:

var evnt = '';

$("#helpTool").click(function (e) {
if(!this.isOn){

evnt = $("#Browse").data('events').click;
$("#ele").unbind('click');
$("#ele").click(function (e) {
    alert('dd');
});

this.isOn=true;
}else{
    this.isOn = false;
    alert('off');
    $("#ele").unblind('click');
    $("#ele").click(evnt);
}
});

Well it looks like you already are - you declared `originalEvent` globally. Incidentally, and with the knowledge that I'm not answering your question, it doesn't sound like you're going about this the best way. You shouldn't need to capture a bound event callback, unset it, then re-set it - this suggests a partial rewrite is needed. Why not just put some conditional code in the callback? And global variables are always best avoided. — Mitya, Jul 24 '12 at 19:13
getCurrentClickEventHandler is not a real function. That is just pseudo code. I am writing a mobile website. When the "?" icon is clicked the page goes into "help mode". All elements with click event handlers are rewritten so that when they are clicked a help dialog is displayed. When help mode is turned off the elements behave normally. — user974896, Jul 24 '12 at 19:16
...which is why you should conditionalise what the event callback does, rather than think in terms of unbinding one callback and setting another, which is not really good practice (or easy to go). In any case, with event delegation, you could easily achieve this. What is the nature of 'help' mode - does it add a `.help` class to the page, or something similar that is identifiable? — Mitya, Jul 24 '12 at 20:05

Mark Pieszak - Trilon.io · Answer 1 · 2012-07-24T19:37:04.683

0

Here you go, figured it out:

Now with e.srcElement.id you can get either HelpMode or HelpModeOff and then can turn on/off your help stuff!

http://jsfiddle.net/zcDQ9/1/

var originalEvent = '';

$('#element').on('yourCustomEvent', function (e) {
   // do stuff
   alert(originalEvent);
   $(this).toggleClass('toggleThing');

   //test for helpMode or helpModeOff here now...
});

$("#helpMode").on('click', function (e) {
    originalEvent = e.srcElement.id;
    $("#element").trigger('yourCustomEvent');
});


//Later in the code
$("#helpModeOff").on('click', function (e) {
   originalEvent = e.srcElement.id;
   $("#element").trigger('yourCustomEvent');
});

edited Jul 24 '12 at 19:37

answered Jul 24 '12 at 19:18

Mark Pieszak - Trilon.io

61,391
14
82
96

My question is how to "$("#element").getCurrentClickEventHandler();" as getCurrentClickEventHandler is not a real function. Im asking how to do that. – user974896 Jul 24 '12 at 19:20
You could do "e.srcElement.id" in each helpMode & helpModeOff, it'll give you the original ID of that element clicked? Confused by what you need – Mark Pieszak - Trilon.io Jul 24 '12 at 19:28
Updated it, should do what you need now! – Mark Pieszak - Trilon.io Jul 24 '12 at 19:37
See my edit. Help mode just puts you into help mode. I need to track clicks on existing elements that have event handlers – user974896 Jul 24 '12 at 19:40
Yeah I see that now, well I think once your inside the customEvent you know whether it's on/off you can have an if that calls functions that can unbind & bind whatever other elements you need, in whatever fashion. – Mark Pieszak - Trilon.io Jul 24 '12 at 19:44
yes but above in the code I have a $("#ele").click(function (e) { //A ton of code }); I want to save the event handler prior to unbinding. That is the issue. – user974896 Jul 24 '12 at 19:49

score 0 · Answer 2 · edited May 23 '17 at 10:34

Okay. In jQuery 1.7 I guess it's a little different.

//get the handler from data('events')

$.each($("#element").data("events"), function(i, event) {
    if (i === "click") {
        $.each(event, function(j, h) {
            alert(h.handler);
        });
    }   
});

http://jsfiddle.net/yQwZU/

This is the reference.

Not sure if the following works with 1.7.

originalEvent = $('#element').data('events').click;

jQuery stored all the handlers in data. See here to learn more about data('events').

score 0 · Answer 3 · answered Jul 24 '12 at 20:16

Personally, I think I would avoid manually binding and unbinding handlers.

Another way to approach this is to bind click events to classes, then all you need to do is add and remove classes from the appropriate elements when switching to/from help mode.

Here's a jsfiddle illustrating what I mean.

Switching to and from help mode then just involves adding removing classes:

$('#btnhelpmode').click(function(){
    if(!helpMode){
     helpMode = true;   
     $('.normalmode').addClass('helpmode').removeClass('normalmode');
     $(this).val('Switch to normal mode...');                            
    }else{
     helpMode = false;   
     $('.helpmode').addClass('normalmode').removeClass('helpmode');              
     $(this).val('Switch to help mode...');                                        
    }        
});

and you just create the handlers required, binding them to the appropriate classes:

$('#pagecontent').on('click', '#element1.normalmode', function(){        
   alert('element1 normal mode'); 
});

$('#pagecontent').on('click', '#element1.helpmode', function(){        
   alert('element1 help mode'); 
});

$('#pagecontent').on('click', '#element2.normalmode', function(){        
   alert('element2 normal mode'); 
});

$('#pagecontent').on('click', '#element2.helpmode', function(){        
   alert('element2 help mode'); 
});

Preserving current click event jquery

3 Answers3