jQuery event issue in ajax based contents

Question

I am getting html contents with an AjaxCall on a button click(LIST Button) and putting it in a DIV.

 $("#list").live("click",function(){
       var id=3;
        $.ajax({
                 url:  location.protocol+'//'+window.location.hostname+"/getList/",
                 type: "POST", 
                 data:{id:id},
                 cache: false,
                 success : function(data){
                    $("#list_template").empty();
                    $("#list_template").html(data);
                 }
             });        
 });

The responded HTML contain another ADD Button in it, so problem is if I click twice/thrice to the LIST Button, and then ADD Button is also clicked twice/thrice on a single click. I don't know what is the problem while I am clearing DIV before inserting Data, and also in View-source ADD button is single.

$("#add").live("click",function(){
    alert("Added");
 });

So what I want is if I click LIST Button as many time as I want, but ADD button should be triggered once on every single click. By some research I think jQuery bind/unbind function may be used here, but I don't know how to use it here.

Answer 1

You can use unbind and bind below ways.

$("#list").live("click",function(){
       var id=3;
        $.ajax({
             url:  location.protocol+'//'+window.location.hostname+"/getList/",
             type: "POST", 
             data:{id:id},
             cache: false,
             success : function(data){
                $("#list_template").empty();
                $("#list_template").html(data);
                $("#add").unbind('click').bind("click",function(){
                    alert("Added");
                });
             }
         });        
 });

or you can also use live and die events.

$("#list").live("click",function(){
       var id=3;
        $.ajax({
             url:  location.protocol+'//'+window.location.hostname+"/getList/",
             type: "POST", 
             data:{id:id},
             cache: false,
             success : function(data){
                $("#list_template").empty();
                $("#list_template").html(data);
                $("#add").die('click').live("click",function(){
                    alert("Added");
                });
             }
         });        
 });