javascript - Bootstrap-确认删除照片

Question

这是我第一次使用 bootstrap-confirmation。我试图删除照片，当他们按下删除键时，将弹出确认信息。如果他们点击“确定”，我们就可以删除照片。我的问题是，当我有 3 张照片和 3 个删除按钮时，您单击第三个按钮，他将删除第一张图像。这是我的代码:

$(function(){
        var removeFunction = function(id) {
            var number = id.split('_');
            var foto = $('#foto_' + number[1]).attr('href');
            var p_id = $('#hidden_field').data('p_id');
            $.ajax({
                type: "POST",
                url: "verwijderfoto",
                data: {foto: foto, p_id: p_id},
                cache: false,
                success: function () {
                    $('#delete_' + number[1]).hide();
                    $('#load').fadeOut();
                    $('#foto_' + number[1]).hide();
                    $('.text_delete_' + number[1]).append("Geen foto");
                }
            });
        };
        var clickedDeleteButton = $('[data-      toggle=confirmation]').confirmation({
            title: "Weet u het zeker ?",
            btnOkLabel: "Ok",
            btnCancelLabel: "Cancel",
            btnOkId: "test",
            onConfirm : function() {
                $('body').trigger('confirmed.bs.confirmation');
            }
        }).click(function(){return $(this).attr('id')});
        $('body').on('confirmed.bs.confirmation', function()   {removeFunction(clickedDeleteButton.attr('id'));return true});
        return false;

    });

如果我在 clickedDeleteButton 中返回 $(this) 我将获得正确的 id，但我认为因为我很快触发了主体，他将无法获得正确的 id。

这是html代码:

 <a href="<?php echo $data['fotoproduct']->foto1?>" class="delete" id="foto_1" data-lightbox="Image-1"><img class="lightbox-foto" src="<?php echo $data['fotoproduct']->foto1 ?>"></a>

 <button class="btn btn-default btn-danger" data-foto="<?php $data['fotoproduct']->foto1 ?>" id="delete_1" data-placement="top" data-toggle="confirmation">X</button>

Answer 1

关于Bootstrap Confirmation文档，它说

Confirmation tries to cancel the default event of the target and trigger it when the "Ok" button is clicked. However, in order to have the good behavior, the plugin must be initialized before manually attaching event listener (with $.on()).

If this is not possible, you could listen the confirmed.bs.confirmation or use the onConfirm callback.

所以我只是稍微改进了你的js

$(document).ready(function () {
    $('[data-toggle="confirmation"]').confirmation({
        title: "Weet u het zeker ?",
        btnOkLabel: "Ok",
        btnCancelLabel: "Cancel",
        btnOkId: "test"
    });

    $('#imgs > button').on('click', function () {
        var id = $(this).attr('id').split('_');
        removeFunction(id[1]);
    });
});

function removeFunction(id) {
    var href = $('#foto_' + id).attr('href');
    $.ajax({
        type: "POST",
        url: "verwijderfoto",
        data: {
            foto: href,
            p_id: id
        },
        cache: false,
        success: function () {
            $('#delete_' + number[1]).hide();
            $('#load').fadeOut();
            $('#foto_' + number[1]).hide();
            $('.text_delete_' + number[1]).append("Geen foto");
        }
    });
};

ALSO CHECK THIS FIDDLE