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文档中，它说

确认尝试取消目标的默认事件，并在单击“确定”按钮时触发它。但是，为了获得良好的行为，必须在手动附加事件侦听器（使用$.on()）之前初始化插件。

如果无法做到这一点，您可以听取confirmed.bs.confirmation或使用onConfirm回调。

所以我稍微改进了你的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

Bootstrap确认删除照片

1 个答案: