Ajax单击事件只工作一次

你好，我对Ajax非常着迷，我只是一个新手

我有一个简单的记录表…每个记录都可以被激活和停用

Activate调用以下ajax代码：

$('#activate').click(function() {  
    var $this = $(this);
    var p1 = $this.data('p1'); 
    var p2 = $this.data('p2');
    $.ajax({                                                        
        url: '<?php echo base_url()."index.php/admin/registrations/activate";?>       /'+p1,
        type: "GET",
        cache: false,  
        success: function(response) {
            if(response == 1) {         
                $("#entry"+p1).html("<a id='deactivate' href='javascript:;'     data-p1='"+p1+"' data-p2='"+p2+"'>Deactivate</a>");
            }
        }
    });
});

$（“#激活”）。单击（函数（）{
var$this=$（this）；
变量p1=$this.data（'p1'）；
var p2=$this.data（'p2'）；
$.ajax（{
url:“/”+p1，
键入：“获取”，
cache:false，
成功：功能（响应）{
如果（响应==1）{
$（“#条目”+p1）.html（“”）；
}
}
});
});

当Deactivate事件调用其他Ajax代码时：

$('#deactivate').click(function(){  
        var $this = $(this);
        var p1 = $this.data('p1');
        var p2 = $this.data('p2');
         $.ajax({                                                        
            url: '<?php echo base_url()."index.php/admin/registrations/deactivate";?>/'+p1,
            type: "GET", 
            cache: false,    
            success: function(response) {  
                if(response == 0){ 
                    $("#entry"+p1).html("<a id='activate' href='javascript:;' data-p1='"+p1+"' data-p2='"+p2+"'>Activate</a>"); 
                }                                   
            }                   
        });                                                               
    });

$（'#停用'）。单击（函数（）{
var$this=$（this）；
变量p1=$this.data（'p1'）；
var p2=$this.data（'p2'）；
$.ajax（{
url:“/”+p1，
键入：“获取”，
cache:false，
成功：功能（响应）{
如果（响应==0）{
$（“#条目”+p1）.html（“”）；
}                                   
}                   
});                                                               
});

一旦激活变为停用…停用链接不起作用，反之亦然。。。 所以链接只起作用一次

我怎样才能解决这个问题？ 感谢您的帮助

您需要使用.on（）将事件绑定到链接。使用$（'#deactivate'）。单击（…）仅绑定到调用时DOM中存在的元素。通过使用.on（）可以绑定到当前和将来的元素

与此语句一起插入的链接：

$（“#entry”+p1）.html（“

更新

下面是一个代码笔，它显示了如何使用.on（）绑定到当前和将来的元素：

请注意，单击“添加新链接”按钮时创建并插入到DOM中的新链接也是如何绑定到单击事件的

因此，在您的情况下，您的代码应该如下所示：

$('body').on('click','#activate',function() {  
    var $this = $(this);
    var p1 = $this.data('p1'); 
    var p2 = $this.data('p2');
    $.ajax({                                                        
        url: '<?php echo base_url()."index.php/admin/registrations/activate";?>       /'+p1,
        type: "GET",
        cache: false,  
        success: function(response) {
            if(response == 1) {         
                $("#entry"+p1).html("<a id='deactivate' href='javascript:;'     data-p1='"+p1+"' data-p2='"+p2+"'>Deactivate</a>");
            }
        }
    });
});

$（'body'）。在（'click'，'#activate'，function（）{
var$this=$（this）；
变量p1=$this.data（'p1'）；
var p2=$this.data（'p2'）；
$.ajax（{
url:“/”+p1，
键入：“获取”，
cache:false，
成功：功能（响应）{
如果（响应==1）{
$（“#条目”+p1）.html（“”）；
}
}
});
});

及

$（'body'）。在（'click'，'#deactivate'，function（）{
var$this=$（this）；
变量p1=$this.data（'p1'）；
var p2=$this.data（'p2'）；
$.ajax（{
url:“/”+p1，
键入：“获取”，
cache:false，
成功：功能（响应）{
如果（响应==0）{
$（“#条目”+p1）.html（“”）；
}                                   
}                   
});                                                               
});

注意，由于ID在一个页面中应该是唯一的，所以我会考虑给链接一个“激活”和“停用”的类属性，否则你可能会在页面上用相同的ID结束多个链接。如果你真的改变了它，也一定要在.n（）中改变选择器。绑定。
请原谅我的无知，但您能告诉我怎么做吗？有人能给我解释一下如何用.on重写我的ajax调用吗？请给我20分钟，不要在我的电脑前当您再次更新html调用函数时
$('body').on('click','#deactivate',function() {    
        var $this = $(this);
        var p1 = $this.data('p1');
        var p2 = $this.data('p2');
         $.ajax({                                                        
            url: '<?php echo base_url()."index.php/admin/registrations/deactivate";?>/'+p1,
            type: "GET", 
            cache: false,    
            success: function(response) {  
                if(response == 0){ 
                    $("#entry"+p1).html("<a id='activate' href='javascript:;' data-p1='"+p1+"' data-p2='"+p2+"'>Activate</a>"); 
                }                                   
            }                   
        });                                                               
    });