一键生成多个ajax调用

One click generates multiple ajax calls

本文关键字：ajax 调用 一键      更新时间：2023-09-26

一个奇怪的现象正在发生在我身上。。

我有一个项目列表，每个项目旁边都有删除按钮来删除该文章，下面是一个例子：http://jsfiddle.net/lughino/8HYeQ/5/

$('.delete').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).parents('li'),
        $url = $(this).attr('href');
    $('#delete_confirm').modal('show');
    $('#delete_confirm').find('button.btn-danger').click(function() {
        $.post($url, function(result) {
            $('#delete_confirm').modal('hide');
            $li.remove();
        });
    });
});

不幸的是，此示例无法重现问题

当我删除id为1的第一篇文章时，执行一个ajax调用。

当我删除id为2的第二个产品时，2个运行ajax调用，一个用于第1条，这是成功的，因为它当然已经被删除了，另一个则用于第二篇文章。

如果我在他执行3次ajax调用时删除了其他内容，以此类推。。

被保存在内存中，就好像旧id。。。你能解决这种奇怪的行为吗？

从什么到期？

这是因为您正在删除按钮单击处理程序中注册确认回调处理程序。因此，当您第一次单击删除按钮时，处理程序会注册一次，因此ajax请求会发送一次。当您第二次单击删除按钮时，又注册了一个确认处理程序，现在我们已经注册了两个确认处理。

应该是

$('.delete').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).parents('li'),
        $url = $(this).attr('href');
    $('#delete_confirm').modal('show');
});
$('#delete_confirm').find('button.btn-danger').click(function() {
    $.post($url, function(result) {
        $('#delete_confirm').modal('hide');
        $li.remove();
    });
});
相关文章：