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

Question

我正在单击按钮（LIST按钮）上的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按钮，因此问题是如果我单击两次/三次到LIST按钮，然后单击一次ADD按钮也两次/三次。 我不知道在插入数据之前清除DIV是什么问题，而且在“查看源”中，“添加”按钮是单个。

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

所以我想要的是，如果我想按任意多次单击“列表”按钮，但是每次单击一次都应触发“添加”按钮。 通过一些研究，我认为可以在这里使用jQuery bind/unbind函数，但是我不知道如何在这里使用它。

Answer 1

您可以按以下方式使用取消绑定和绑定。

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

或者您也可以使用现场和死亡事件。

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