javascript - Bootstrap 确认不尊重选项

Question

只需将 Bootstrap 弹出窗口的 bootstrap-confirmation 扩展添加到元素中的某些按钮。我遇到了不尊重选项的问题。我试图让弹出窗口作为单例工作，并在用户点击它们之外时关闭 singleton 和 data-popout 选项，分别 - 都设置为 true。我也没有看到我定义的任何回调行为发生。

我在 HTML 标记和函数中都定义了选项，但都不起作用。仍然收到多个框，但它们没有按预期关闭。

我的 JS 在所有其他库之后加载，并且在我的页脚的 custom.js 文件中。

JS如下:

$(function() {
    $('body').confirmation({
        selector: '[data-toggle="confirmation"]',
        singleton: true,
        popout: true
    });
    $('.confirmation-callback').confirmation({
        onConfirm: function() { alert('confirm') },
        onCancel: function() { alert('cancel') }
    });
});

在我的 HTML 中的按钮上实现的框示例如下:

<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>

任何指针将不胜感激。我什至将 bootstrap-confirmation.js 文件本身的默认选项更改为我想要的，但仍然没有成功。

Answer 1

原来我需要重新安排几件事才能让它发挥作用。我留在了 last_clicked_id 等内容中，因为我需要添加它以获取我刚刚点击的内容的 id 值。

// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
    last_clicked_id = $(this).data("id");
    last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
    singleton: true,
    popout: true,
    onConfirm: function () {
        alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
        // TODO: Add AJAX to wipe entry and refresh page
    },
    onCancel: function () {
        alert("DEBUG: Delete canceled for id : " + last_clicked_product);
    }
});

我在未执行的回调逻辑方面领先一步。只需将其添加到 .confirmation() 函数中的 onConfirm: 和 onCancel: 键值即可修复。那里有点 RTFM 的时刻，但不幸的是，这在文档中不是很清楚。