jQuery绑定在AJAX调用后单击一个链接

Question

我很生气 - 也许有人能够帮助我.

我需要在AJAX调用之后将点击重新绑定到链接,但由于某种原因它不想工作.

这是我的代码:

if ($('.active').length > 0) {
    $('.active').click(function() {
        var elem = $(this);
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            dataType: 'html',
            success: function(data) {
                elem.replaceWith(data);                                                     
            }       
        });         
        $('.active').bind('click'); return false;           
    });
}

任何的想法？

感谢您的回复 - 我修改了代码,但问题仍然存在:

function makeActive() {
    if ($('.active').length > 0) {
        $('.active').click(function() {
            var elem = $(this);
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                dataType: 'html',
                success: function(data) {
                    elem.replaceWith(data);                             
                }       
            }); 
            $('.active').live('click', makeActive);     
            return false;           
        });
    }
}


$('.active').live('click', makeActive);

Answer 1

更新于2012年10月31日

从jQuery 1.7开始,推荐的方法是使用on-

$(document).on('click', '.active', function () {
    // click handler code goes here
});

你能试试以下吗？

$('.active').live('click', function()
{
    // click handler
});

Answer 2

success如果要在Ajax调用之后执行它,则必须在处理程序中添加重新绑定:

success: function(data) {
    elem.replaceWith(data);
    $('.active').bind('click', /* some function needs to go here*/);
}

也就是说,在这种情况下,live()或者delegate()可能是更好的选择[ 更新:现在jQuery 1.7已经出来了,一切都可以完成.on()].如果您有其他.active未被替换的链接,这也会阻止点击处理程序的双重分配.

更新:关于您更新的代码:您使用的方式live违背了其目的.请阅读其文档.您正在做的是在单击链接时分配单击处理程序,这意味着您反复添加单击处理程序.

这是代码的改进版本.

$('.active').live('click', function(event) {
    var elem = $(this);
    var url = $(this).attr('href');
     $.ajax({
         url: url,
         dataType: 'html',
         success: function(data) {
              elem.replaceWith(data);                             
         }       
     });    
     event.preventDefault();
     event.stopPropagation();
});