基于ajax的内容中的jQuery事件问题

Question

我得到一个AjaxCall的html内容在一个按钮点击(列表按钮)，并把它放在一个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);
                 }
             });        
 });

响应的HTML包含另一个ADD按钮在它，所以问题是，如果我点击两次/三次到列表按钮，然后添加按钮也被点击两次/三次在一次点击。我不知道是什么问题，而我在插入数据之前清除DIV，也在视图源ADD按钮是单一的。

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

所以我想要的是，如果我点击列表按钮尽可能多的时间，我想要的，但ADD按钮应该被触发一次，每一次点击。通过一些研究，我认为jQuery bind/unbind函数可能在这里使用，但我不知道如何在这里使用

Answer 1

你可以在下面使用unbind和bind。

$("#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");
                });
             }
         });        
 });

或者你也可以使用live and die事件

$("#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");
                });
             }
         });        
 });