使用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);

- user398341

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

- MD Sayem Ahmed

---

@SayemAhmed 已经搞定了。.live(arg, fn) 被 .on(bind, arg, fn) 取代了。我忽略了 .on 的可选参数，它是用于 AJAX 调用的类或 ID 的位置。与在 .live 中调用之前放置不同。另一篇文章强调 .on 函数必须绑定到具有子调用的静态元素上。 - The Thirsty Ape

我认为这应该是被接受的答案，因为它不需要每次加载新元素时绑定事件，而是捕获所有冒泡到文档并过滤与选择器匹配的点击（或其他）事件。 - ODaniel

$('.active').on('click', function () { 对我无效，但这个解决方案 $(document).on('click', '.active', function () { 起作用了。 - ewroman

Answer 2

如果您想在Ajax调用之后执行它，那么您需要在success处理程序中添加重新绑定：

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

- Felix Kling