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不起作用

2 个答案: