jQuery.live() Handlers Firing Multiple Times

Question

I have to generate some buttons dynamically based on some service response, and also have to attach some handlers on click of those buttons. So I am using jQuery.live() for it, it works well for the first time.

But when i removes all buttons using jQuery("<some container div>").empty() and creates again those buttons, now on click of button "handler calls twice", if I repeat the same it fires thrice and and same.

Can you guys help me, thanx in advance.

yeah i know its deprecated but the version which we are using doesn't support on(). — santosh kore, May 28 '13 at 03:13
some of the click handlers, $("#remove" + id). live( 'click', function(evt) { if(liveEventHandler(evt)) { self.removeComponentFromPrint(self); } } ); — santosh kore, May 28 '13 at 03:14
Using `die()` before `live()` or make sure your script will only run once.And try to use `.off()` and `.on` replace `die()` and `live()` after jQuery 1.7 — Jarvan, May 28 '13 at 03:15
no point in calling die() because those elements are already removed, but adding those elements again it calls twice and thrice. — santosh kore, May 28 '13 at 03:27
@santosh kore You should read about `live()`.It doesn't mean to bind event on exists elements just like `bind()`,it works on another way:when the action was triggered on each element,jQuery will judge if this element matched the selector,if matched the event will triggered.So `remove()` will not remove the event which bind by `live()` . — Jarvan, May 28 '13 at 06:21
From [jQuery](http://api.jquery.com/delegate/): >As of jQuery 1.7, `.delegate()` has been superseded by the `.on()` method. For earlier versions, however, `.delegate()` remains the most effective means to use event delegation. — LCJ, Jun 21 '14 at 18:34

score 12 · Answer 1 · answered May 28 '13 at 05:01

12

$().live() was depreciated in jQuery 1.7 and removed in 1.9

Or try something like

$('#button').die('click').live('click', function(e) {
        alert('Button click');
    });

answered May 28 '13 at 05:01

ANonmous Change

798
3
10
32

JamesN · Answer 2 · 2013-05-28T03:39:01.780

Follow jquery website jquery.live() :

Attach an event handler for all elements which match the current selector, now and in the future.

That's mean : the event that you attach with live will be applied for all element that have same selector. So you must check the event of element and just attach new element if it's not available.

$("SELECTOR").live('click',function(e){
         //check the event is already set
         e.preventDefault();
         if(e.handled === true) return false;
         e.handled = true;   

         //Do something here
         //YOUR CODE HERE

         return false;
    });

All the answers are very nice, but this is what solves the problem! — DaniCE, Oct 01 '14 at 15:11

score 0 · Answer 3 · answered May 28 '13 at 03:37

0

Try this, on your removeButton function, try unbinding the click event. And rebind it when you add it again.

function removeButton(){
   $("button").unbind("click");
  //code for removing button
}

function addButton(){
  //code for adding button
  $("button").live("click", function(){ 
       //your code
  });
}

answered May 28 '13 at 03:37

Jude Duran

2,195
2
25
41

Use .die() instead of .unbind() to remove any handler that has been attached with .live() – icaru12 May 28 '13 at 03:48
Have you tried replacing unbind() with die() as Hendy suggested? – Jude Duran May 28 '13 at 04:13

score 0 · Answer 4 · edited May 23 '17 at 11:44

This is not a direct answer to the question. However it is worth to take a note of it.

.live() vs .bind()

@jAndy says:

You should consider to use .delegate() instead of .live() whereever possible. Since event delegation for .live() always targets the body/document and you're able to limit "bubbling" with .delegate().

And from jQuery:

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, .delegate() remains the most effective means to use event delegation.

Reference:

score 0 · Answer 5 · answered Feb 17 '21 at 10:42

0

I am using Jquery 1.11.min and this worked for me:

$(document).ready(function() {
    $('#button_id').off('click').on('click', function() {
    //enter code here
    });
});

answered Feb 17 '21 at 10:42

shasi kanth

6,987
24
106
158

jQuery.live() Handlers Firing Multiple Times

5 Answers5