Question

您好，我对Ajax感到疯狂，我只是个新手......

我有一个带记录的简单表格....每条记录都可以激活和停用......

激活此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>");
            }
        }
    });
});

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

一旦Activate变为Deactivate .... Deactivate链接不起作用，反之亦然...... 所以链接只能运作一次......

我该如何解决这个问题？感谢您的帮助

Answer 1

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

您使用此语句插入的链接：$("#entry"+p1).html("<a id='activate'因此根本不受点击事件的约束，这就是您点击它时没有任何反应的原因。

有关详细信息，请参阅此处：http://api.jquery.com/on/

<强>更新

这是一个Codepen，它显示了如何使用.on（）绑定到当前和未来的元素： http://codepen.io/anon/pen/ypvuh

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

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

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

注意，由于ID应该在页面中是唯一的，我会考虑给链接一个“激活”和“停用”的类属性，否则你可能会在页面上以多个链接结束ID。如果您确实更改了它，还要确保更改.on（）绑定中的选择器。

Ajax点击事件只工作一次

1 个答案: