jQuery绑定点击AJAX调用后的链接答案

【问题标题】：jQuery binding click to a link after AJAX calljQuery绑定点击AJAX调用后的链接
【发布时间】：2011-06-18 01:06:55
【问题描述】：

我很生气——也许有人能帮我解决这个问题。

我需要在 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);

【问题讨论】：

请查看我关于您的更新的更新。

标签： jquery bind

【解决方案1】：

更新于 2012 年 10 月 31 日

从 jQuery 1.7 开始，推荐使用on -

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

你能试试下面的吗？

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

【讨论】：

@SayemAhmed 想通了。 .live(arg, fn) 由 .on(bind, arg, fn) 继任。我忽略了一个事实，即.on 的可选参数参数是为 AJAX 调用放置类或 id 的位置。而不是放在.on 调用之前，例如.live。另一个post 强调.on 函数必须通过子调用绑定到静态元素。
我认为这应该是公认的答案，因为它不需要在每次加载新元素时绑定事件，因为它捕获所有单击（或其他）事件，这些事件冒泡记录并过滤匹配的事件选择器。
$('.active').on('click', function () { 对我不起作用，但这个解决方案 $(document).on('click', '.active', function () { 有效。

【解决方案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 的方式违背了它的目的。请阅读其documentation。您所做的是在单击链接时分配一个单击处理程序，这意味着您正在一遍又一遍地添加单击处理程序。

这是您的代码的改进版本。

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

【讨论】：