javascript - 一键生成多个ajax调用

Question

我身上发生了一个奇怪的现象..

我有一个项目列表，每个项目旁边都有删除按钮来删除该文章，下面是一个示例: 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一样保留在内存中......你可以解决这个奇怪的行为吗？

从什么时候到期？

Answer 1

这是因为您正在删除按钮单击处理程序中注册确认回调处理程序。因此，当您第一次单击删除按钮时，处理程序会注册一次 - 因此 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();
    });
});