Question

我有一个img元素列表，每个元素都有一个带有X的跨度，用于删除指定的图像。对于双重检查，每当用户点击X我显示模式以获得确认。执行此操作的功能如下：

function refresh() {
            $('#deleteImg .btn-primary').click(function () {
                var src = $(this).data('src');
                var elem = $(this).data('elem');
                $.post('/api/deleteimage', {src: src}, function () {
                    elem.remove();
                    $('#deleteImg').modal('hide');
                })
            })
        }


function refreshImages() {
            $('.img-wrap .close').click(function (ev) {
                refresh()
                var src = $(this).closest('.img-wrap').find('img').attr('src');
                var elem = $(this).closest('.img-wrap');
                $('#deleteImg').modal('show').find('.btn-primary').data('src', src).data('elem', elem);
                refresh();
            })
        }

它运行良好但是deleteimage API被调用了两次，为什么会这样？

Answer 1

我发现我应该调用stopPropagation方法。

Answer 2

每次拨打refresh()时，都会将点击事件绑定到$('#deleteImg .btn-primary')。这是附加的，所以如果你绑定它两次然后点击一次，点击功能将被触发两次。 Aaaaand你在refresh()两次致电refreshImages() ......可能不是巧合：）

为什么要调用两次API？

2 个答案: