Skip to content
sholsinger.com

Prevent jQuery.live() Handlers From Firing Multiple Times

Recently I was working on something where I needed to use jQuery's .live() event handling. The problem I was experiencing was that my .live() handler was firing multiple times for the same event. I devised a rather simple way to avoid this issue and I'm going to share it with all of you.

The first thing we need to know is that the event object which is passed to all of the event handlers for that given event is the same object. You can modify it and the next handler will get the same object you just modified. So my method takes advantage of that fact and adds a .handled property to the jQuery event object. My event handler method then checks to see if this property is equal to true and if it isn't, then it executes it's payload. Otherwise it just returns false to prevent bubbling.

function myLiveEventHandler(event)
{
  if(event.handled !== true)
  {
    // put your payload here.
    // this next line *must* be within this if statement
    event.handled = true;
  }
  return false;
}

$('selector').live('event', myLiveEventHandler);

There you have it. We have bound a .live() event handler and prevented it from running twice. (If it just so happened that it were bound more than once.) Why might it be bound more than once? If you use jQuery Mobile or some sort of AJAX loading method for content then you may duplicate your event handler binding every time you load a new page. This is probably the poor man's way of handling this problem and you should probably try to find a way to avoid double binding the event instead. Who has the time for that?

Comments (39)

  1. steve

    Curious,
    Don't you at some point want to set event.handled = false; as the initializer.. What if the handled property/var starts out as true when initialized?

  2. AimUp

    Nice post Sholsinger.
    I was looking for this solution for a while.

    I also found that if you .die() before you .live (or .undelegate() before you .delegate ), the multiple bindings are avoided all together.

    for example:

    $('selector').die();
$('selector').live('event', myLiveEventHandler);

    So to answer your question - I guess I have time for that ;).

    Cheers

  3. raystrach

    i call it genius!!

    thanks aimup and sholsinger.

  4. Dave

    Another solution to the root problem is to make sure you don't have any old AJAX-loaded pages lying around in your DOM by adding this JS code:

    $(document).bind('pagechange', function(){
	$('.ui-page:not(.ui-page-active)').remove();
});

    This fixed a problem for me where jquery mobile was loading the same page twice in the DOM (even though I had the data-url set) because the first time I loaded the page I didn't have any query params and the second time I did. So jQM treated the second load as a new page, but of course it had all the same DOM elements which meant tons of duplicate IDs in the DOM.

    Hope this helps!

    Dave

  5. Stephen

    @Dave I believe that may be exactly what happened in my case. Thanks for your contribution.

  6. Stephen

    @steve

    The handled property will never start out as "true" when initialized unless you initialize it as such. It will be "undefined" until set. When set and uninitialized it will be "null". It will not hold true or false until you set it as such.

    I should also mention it might be a good idea to give each event handler a unique handled property on the event so that you can have multiple event handlers handle the same event if necessary.

  7. Luka

    If it's of any help to anyone... Use .on() instead of .live() and you shouldn't experience problems of methods beeing called more then once...

  8. Stephen

    @luka that would work, if you're able to use jQuery 1.7. http://api.jquery.com/on/

    However this article was written months before the release of 1.7 and is still relevant to those who--for whatever reason--cannot use 1.7.x.

  9. Christopher

    Thanks, needed to stay with a old 1.6.2 version of jQuery and this worked perfectly.

  10. Techie Talks

    Kewl! I think it's similar to addtng return false drirect after an event?


    $('#btn').live('click',function(){ $.ajax({ ... }); return false; });

  11. dev

    I love you! thanks.

  12. Ved Sahani

    Amazing, thanks for solution

  13. Tim

    Thanks! Don't know why I was having the multiple binding problem, but your fix ended it, and as you said, who has time to figure out why it was happening once it isn't anymore?

  14. john

    Thanks for this solution.
    That solved the problem but then my click event does not work.
    I dont get it because mouseover, mouseout works fine.
    Can anyone please help me out with it?

  15. Dynamic tooltip using JQuery Ajax and JQuery Tools « mjtoolbox

    [...] Prevent multiple Ajax requests : After implement all above, I found that somehow Ajax request fires multiple times. Some people suggested that I use .dead() before .live(), but I did a simple approach. I used event.handled check before Ajax request. Also, check the default content if it is already updated. Good resource here. [...]

  16. Jeff Parr

    If I have offending click event inside of live() - especially in dynamic listing where many live() can be fired, e.g. one for each list element user works with simultaneously, I usually unbind right before, to save trouble -
    e.g.:
    $('.click_button').unbind("click");
    $('.click_button').live("click",function(){
    //code
    }

    Same I do for any nested clicks inside of live().

    Usually it gets job done.

  17. Rupesh

    Thnxx it worked like a charm..........

  18. Mark

    Saved my life! Thank you! Slight change up because my if/then/else logic was already complicated enough without another level:

    $('.hotspot').live("mouseup", function(e) {
    e.preventDefault();
    if(e.handled === true) return false;
    e.handled = true;

    //my code here

    return false;
    });

  19. andre

    Brilliant! Worked perfectly for me!

  20. asma gheisari

    thanks a milion

  21. tien thanh

    Thank you so much. It's working to me.

  22. Mohammed

    Thanks man. I spent two days of my life trying to solve a similar problem. Thank you so much for sharing this.

  23. Erick

    Thank you very much! You should solved a major issue for me!

  24. Jime

    thank you so much! you made my day! :] :D

  25. Gopesh

    Thanks a Lot man!!!..Good snippet

  26. Vineet

    it works for mw as well...You rocks.

  27. sumit sharma

    Thanks buddy thanks a lot yes you are life savior you salved my huge problem its appreciative.

  28. Eugene

    Simple and great! Thanks a lot, Sholsinger.
    Also instead of "live" can be used "on" maybe

  29. Rajarajan G

    Thanks a lottttt !!!
    Its working very Fine Dude!!!
    Good Idea in Jquery !!!!!!!!!!!!:)

  30. Angelo

    Great job guy! You saved my a$$!

  31. crazyku

    Thank you very much. Your information is safe me.

  32. Matt Langston

    You could also use jquery's stopImmediatePropagation() also right?

  33. Stephen

    Yes that does work as well and is less verbose: http://jsfiddle.net/sholsinger/pY87e/

  34. Magnus

    Yes! Solved my problem too! Unbind before binding didn't work, but this did. Awesome!

  35. Prevent jQuery multiple event triggering | Gajotres.net

    […] Note Solution found here: http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/ […]

  36. Belinda

    your such a charm...I have been trying to solve this issue and found your site..Thanks so much for sharing!

  37. Belinda

    nice solution very good

  38. Prevent Multiple Event Firing | .blog

    […] fire x number of times. That is not what we want. I have search the web for help, and encounter a post to solve this […]

  39. chandu

    thanks man!!!

comments powered by Disqus