javascript 如何使用 Bootstrap 3 popovers 和 jQuery 确认表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20876292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to confirm a form submission with Bootstrap 3 popovers and jQuery
提问by bhall
I have rows of items in a list that each have their own delete button. Before deleting the item, I'd like to use Bootstrap's popovers to display a confirmation before the form is actually submitted:
我在列表中有几行项目，每个项目都有自己的删除按钮。在删除项目之前，我想在实际提交表单之前使用 Bootstrap 的弹出窗口显示确认信息：
I used to use the Fast Confirm jQuery pluginfor this, but I'm sure there's a simpler, cleaner way to do this without plugins.
我曾经为此使用Fast Confirm jQuery 插件，但我确信有一种更简单、更干净的方法可以在没有插件的情况下做到这一点。
I can pass the values from the form to jQuery, and trigger the popover, but I'm not sure how to submit the form based on the responses selected in the popover. Also, whenever another delete button is triggered, it would be preferable to disable any other open popovers. I recognize that this is fundamentally a Javascript/jQuery question, and I would greatly appreciate any help or suggestions.
我可以将表单中的值传递给 jQuery，并触发弹出窗口，但我不确定如何根据弹出窗口中选择的响应提交表单。此外，每当触发另一个删除按钮时，最好禁用任何其他打开的弹出窗口。我认识到这基本上是一个 Javascript/jQuery 问题，我将不胜感激任何帮助或建议。
Here's a Bootply that shows my progress so far: http://www.bootply.com/103376
这是一个 Bootply 显示我到目前为止的进度：http: //www.bootply.com/103376
Thanks!!
谢谢！！
回答by bhall
I ended up using AnaelFavre's PopConfirmjQuery plugin, which leverages Bootstrap's popover feature. I made some minor edits to the main component, jquery.popconfirm.js(such as changing the buttons to English instead of the default French). It's nice because it handles a form submission or a link click automatically. The only thing I wish it would do is toggle closed any other open popovers when .popConfirm()is triggered. But, I'm sure this could easily be solved.
我最终使用了AnaelFavre的PopConfirmjQuery 插件，它利用了 Bootstrap 的弹出功能。我对主要组件进行了一些小的编辑jquery.popconfirm.js（例如将按钮更改为英语而不是默认的法语）。这很好，因为它会自动处理表单提交或链接点击。我希望它做的唯一一件事就是在.popConfirm()触发时切换关闭任何其他打开的弹出窗口。但是，我相信这很容易解决。
Usage is pretty simple. To solve my problem above, to confirm a form submission with a Bootstrap popover, use the following example:
用法很简单。要解决我上面的问题，要使用 Bootstrap 弹出框确认表单提交，请使用以下示例：
HTML:
HTML：
<form action="yourDeleteScript.php" method="post">
<input type="hidden" name="id" value="100">
<button class="btn btn-default btn-delete" type="submit">Delete</button>
</form>
<script type="text/javascript" src="jquery.popconfirm.js"></script>
JS:
JS：
$(".btn-delete").popConfirm({
title: "Delete Item",
content: "Are you sure you want to delete this item?",
placement: "top"
});
*This is all working using jQuery 1.10.2 and 2.0.3, Bootstrap 3.0.3, and the PopConfirm plugin on 1/2/14 *
*这一切都在 1/2/14 上使用 jQuery 1.10.2 和 2.0.3、Bootstrap 3.0.3 和 PopConfirm 插件工作 *
回答by charlietfl
Took a little figuring out because the popover was getting appended to bodyso there can be several in existence, with no direct relation to the button that opened them.
花了一点时间弄清楚，因为弹出窗口被附加到body所以可以存在几个，与打开它们的按钮没有直接关系。
If you don't set the container to bodythey will get inserted within each form, which helps isolate the instance of popover.
如果您不将容器设置为body它们将被插入到每个表单中，这有助于隔离 popover 的实例。
There is an event shown.bs.popoverthat triggers on the selector that the popover is bound to. Using that event you can isolate everything within the form
有一个事件shown.bs.popover会在弹出框绑定到的选择器上触发。使用该事件，您可以隔离表单中的所有内容
var popOpts={
placement: 'right',
title: 'Delete Item',
html: 'true',
content: 'Are you sure you want to delete this item?<br><button class="btn btn-default popover-submit" type="button">Yes</button><button class="btn btn-default" type="button">No</button>',
//container: 'body'
}
// Delete button popover confirmation
$(".btn-delete").popover(popOpts).on('shown.bs.popover', function(e) {
var $delete=$(this)
var $form=$delete.closest('form')
var $pop=$form.find('.popover');
var $popButtons=$pop.find('button').click(function(){
if($(this).is('.popover-submit')){
$form.submit();
}
$delete.popover('destroy').popover(popOpts);
});
});
I found a bug trying to use popover('hide')where it was causing overlap of another popover , yet not visible, and the buttons wouldn't work. Workaround was to destroy and recreate popover so it is removed from DOM each time
我发现一个错误试图使用popover('hide')它导致另一个 popover 重叠的地方，但不可见，按钮不起作用。解决方法是销毁并重新创建弹出窗口，以便每次都从 DOM 中删除它
NOTE: See added class for popover Yesbutton
注意：请参阅弹出Yes按钮的添加类
