将bootbox.js确认框添加到href链接中

Question

将bootbox.js确认框添加到href链接中

3

我正在使用 href 标签在 HTML 表格的所有行中绘制按钮。当用户单击行按钮时，它将使用 HTML GET 重定向用户到另一个 PHP 脚本，并传递一些行值。但在我的当前实现中，当用户单击该按钮时没有确认消息。我添加了基本的 JavaScript 确认框，但它非常基础，并且浏览器每次都会弹出警告框来请求停止弹出确认框。

因此，我找到了一个名为 bootbox.js 的库，它专门用于 CSS 警告框和确认框。但是，当我将 bootbox 方法与当前的 jQuery 实现结合使用时，它无法正常工作！

bootbox - bootbox 文档

以下是我的代码：

这是创建 HTML 链接的 href 代码:

echo "<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>";

以下是包含bootbox调用的jQuery代码部分。

<script type="text/javascript">
    $('.confirmation').on('click', function () {
          return bootbox.confirm('Are you sure?');
    });
</script>

- rafalefighter

嗨 - 你真的需要得到确认吗？这样用户可以回答是或否？我只是想确保你需要用bootbox.confirm而不是bootbox.alert。 - Vanquished Wombat

我只想确认一个带有“是”和“否”按钮的框。当用户点击“是”时，href应指向外部php文件，而当点击“否”时，不应发生任何事情。 - rafalefighter

你是否也包含了bootbox的依赖项，我指的是bootstrap和jquery? - Vanquished Wombat

是的，我已经包含了它们，并且警告框正常工作！！ - rafalefighter

值得指出的是，这个功能无法按预期工作的原因之一是，与本地对话框不同，使用标记和CSS（如Bootstrap模态框）制作的模态框无法阻止执行流程。换句话说，它们不能直接替代。这在Bootbox文档的几个地方有所说明。 - Tieson T.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dekel · Accepted Answer

您应该阻止单击链接时的默认行为（否则浏览器将重定向到该链接）。
confirm 函数应接收一个回调函数（用于处理确认结果）。

查看此示例：

$('.confirmation').on('click', function (e) {
  e.preventDefault();
  href = $(this).attr('href');
  return bootbox.confirm('Are you sure?', function(result) {
    if (result) {
      window.location = href
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>