1

I am stuck trying to unbind and rebind a click event. I want to "save" the click event, unbind it, and rebind it with a conditional statement.

I'm able to get the click handler saved using the information here: jQuery find events handlers registered with an object

I am on an older version of jQuery (1.5), so I'm using the data("events") method.

So far...

var events = $('#myElement').data("events");

alert(events.click[0].handler);

$('#myElement').unbind('click');

Now it will alert me the handler function and it looks correct. I want to add stuff to it, but I thought for starters I would just try rebinding the same click event. However, I'm not sure how to rebind correctly. Things I have tried:

$('#myElement').bind('click', null, events.click[0].handler); // gives 'click.0 is null or not an object

$('#myElement').bind('click', events.click[0].handler); // gives 'click.0 is null or not an object

$('#myElement').bind('click', null, events.click); // seems to have no effect

$('#myElement').bind('click', events.click); // seems to have no effect

So I feel I almost have it but I'm not sure what to do from here. How do I use the events variable to rebind the click event?

Thank you for any and all help.

Community
  • 1
  • 1
Mike
  • 399
  • 2
  • 9
  • 19

1 Answers1

1

You can make use of the .die() method in jQuery (added in 1.4.1). Any handler that has been attached with .live() can be removed with .die().

Ref for .die() : http://api.jquery.com/die/
Ref for .live() : http://api.jquery.com/live/

HTML

<div id="myElement">Testing save event</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {


     function ClickEventHandler()
     {
        alert('abc');
     }

     $('#myElement').live('click', ClickEventHandler);


     function GetClickEventHandler(selector)
     {
        for(var i = 0 ; i < $._data(document).events.live.length ; i++)
        {
            if( $._data(document).events.live[i].selector == selector )
            {
                return $._data(document).events.live[i].handler;
            }
        }   
        return null;
     }

     var myFn = GetClickEventHandler('#myElement');

     $('#myElement').die();


     $('#myElement').live('click', myFn );
    });
</script>

To see is the code actually work, you can try comment out $('#myElement').live('click', myFn ); and click the element, it should not alert. Then enable this back, it will alert.

Added jsfiddle example:
One is commented out : http://jsfiddle.net/9wbPH/1/
One is actual work: http://jsfiddle.net/9wbPH

Derek
  • 2,695
  • 1
  • 16
  • 17
  • We have a handler function that we reuse a lot in a seperate .js file. It gets applied to a large number of controls in the page I'm working on and I only needed to add the conditional statement to one of them, that's why I was hoping to "save" it, unbind it, and rebind it with the conditional statement somehow. The live method doesn't give me any errors but it doesn't seem to work either... – Mike Feb 26 '13 at 16:38
  • I tried $('#myElement').die(); $('#myElement').live('click', events.click[0].handler); Is that how it should look? Thanks. – Mike Feb 26 '13 at 16:39
  • @Mike , I have written a function to get back the handler that binded before. Please note that the code above works only if you are using .live to bind click event and .die to remove all event. Give a try on the code above. – Derek Feb 26 '13 at 17:34