0

您好，我对 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>"); 
                }                                   
            }                   
        });                                                               
    });

一旦激活变成停用......停用链接不起作用，反之亦然......所以该链接只能工作一次......

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

4

1 回答 1

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 中的新链接是如何绑定到单击事件的。

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

$('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() 绑定中的选择器。

于 2013-11-09T21:41:47.860 回答