bootstrap 确认中的 PreventDefault 不起作用

Question

当我使用这段代码时：

$(function() {
            $('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function () {
                e.preventDefault();

                // Do Ajax Here
                var ZoneId = 1;
                var value = 1;
                var published_at = $('#published_at').val();
                $.ajax({
                    type: "POST",
                    url: host + '/zone/toggleEnable',
                    data: {id: title, value: body},
                    success: function( msg ) {
                        alert('success');
                        //$("#ajaxResponse").append("<div>"+msg+"</div>");
                    }
                });

            });

        });

然后我在确认弹出窗口中单击“是”，e.preventDefault() 不起作用并且整个页面重新加载，这不是我想要的行为，因为我需要调用 ajax。为什么会这样？我该如何解决这个问题？

Answer 1

您的回调函数缺少其事件参数。尝试替换这个：

$('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function () {

有了这个：

$('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function (e) {

请注意添加的 e 参数，您现在可以在下一行找到它：

e.preventDefault();

Answer 2

不知道我是怎么想出来的，但我能够在 bootstrap 确认初始化脚本中初始化我自己的确认自定义框。我用一个按钮替换了锚点，它起作用了：

$('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]',
        btnOkClass: 'btn btn-sm btn-success',
        btnCancelClass: 'btn btn-sm btn-danger',
        template: '<div class="popover confirmation">' +
        '<div class="arrow"></div>' +
        '<h3 class="popover-title"></h3>' +
        '<div class="popover-content">' +
        '<p class="confirmation-content"></p>' +
        '<div class="confirmation-buttons text-center">' +
        '<div class="btn-group">' +
        '<button class="btn" data-apply="confirmation"></button>' +
        '<a href="#" class="btn" data-dismiss="confirmation"></a>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>'});

bootstrap 确认中的 PreventDefault 不起作用

PreventDefault in bootstrap confirmation doesn't work

jquery

twitter-bootstrap

bootstrap-confirmation