只需将 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
文件本身的默认选项更改为我想要的,但仍然没有成功。
最佳答案
原来我需要重新安排几件事才能让它发挥作用。我留在了 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 的时刻,但不幸的是,这在文档中不是很清楚。
关于javascript - Bootstrap 确认不尊重选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38349880/