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

Posted 2023-02-21

【中文标题】jQuery绑定点击AJAX调用后的链接

【英文标题】：jQuery binding click to a link after AJAX call

【发布时间】：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);

【问题讨论】：

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

【参考方案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();
);