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.

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.

• javascript
• jquery
• html

• Can you post your code? – Niche Commented May 28, 2013 at 3:11
• 3 yeah i know its deprecated but the version which we are using doesn't support on(). – santosh kore Commented May 28, 2013 at 3:13
• some of the click handlers, $("#remove" + id). live( 'click', function(evt) { if(liveEventHandler(evt)) { self.removeComponentFromPrint(self); } } ); – santosh kore Commented May 28, 2013 at 3:14
• 1 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 Commented May 28, 2013 at 3:15
• no point in calling die() because those elements are already removed, but adding those elements again it calls twice and thrice. – santosh kore Commented May 28, 2013 at 3:27

5 Answers 5

$().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');
    }); 

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;
    });

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
  });
}

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:

1. The Difference Between jQuery's .bind(), .live(), and .delegate()
2. Jquery live() vs delegate()
3. Differences Between jQuery .bind() vs .live() vs .delegate() vs .on() Introduction

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
    });
});