Jquery使用Bootstrap Confirmation框获取数据id(带有扭曲）

Jquery getting the data id with Bootstrap Confirmation box (with a twist)

本文关键字：id 数据 Bootstrap 使用 Confirmation 获取 Jquery      更新时间：2023-09-26

我正在使用引导程序确认插件，我有一个包含用户列表的表。其中一列有一个删除按钮，它指向一个删除用户的链接，但在删除用户之前，我有一个需要单击的确认框。我只想使用一个为每个按钮弹出的确认对话框，并且我想将用户id的链接分配给删除按钮。

现在的转折点是，整个表也在一个表单中进行多次删除。所以我不能为每个删除按钮都有单独的表格

<table class="table table-bordered table-striped mb-none" id="datatable-default">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th class="center">Actions</th>
        </tr>
    </thead>
    <tbody>
    <tr role="row" class="even">
        <td>1</td>
        <td><a href="http://website.dev/globaladmin/users/7">jane doe</a></td>
        <td>jane@gmail.com</td>
        <td>
            <a href="#" class="confirmation-callback" data-id="1" data-placement="left">
                <i class="fa fa-trash-o"></i>
            </a>
        </td>
    </tr>
    <tr role="row" class="even">
        <td>2</td>
        <td><a href="http://website.dev/globaladmin/users/7">john doe</a></td>
        <td>john@gmail.com</td>
        <td>
            <a href="#" class="confirmation-callback" data-id="2" data-placement="left">

   <i class="fa fa-trash-o"></i>
        </a>
    </td>
</tr>
<tbody>

这里是我的js代码：

$('.confirmation-callback').confirmation({
        onConfirm: function() {
            alert('You clicked: delete');
        },
        onCancel: function() {
            alert('You clicked: cancel');
        }
    });

在javascript中，我只想获得调用函数的按钮的数据id，类似于：

$(this).data(id);

以下是jsfiddle的链接/完整代码：http://jsfiddle.net/mswyxp0u/

我能想出一个解决方案。因此：首先将用于确认的singleton选项设置为true。将其设置为true将导致：

设置true一次只允许显示一个确认。

单击最新的确认元素时，较旧的元素将消失。

现在我们知道一次只会出现一个确认框。因此，现在创建一个全局变量来存储id（data-id）的上次单击的删除按钮属性。现在，将事件绑定到该删除的单击，然后将数据id存储在全局变量中，因为您可以在单击事件中轻松使用$(this).data("id")。

现在在onConfirm或onCancel中使用此全局变量，因为您只能在单击删除按钮后确认/取消，现在如果一次只显示一个确认框，则意味着确认/取消回调将仅针对上次单击的按钮。

工作演示：https://jsfiddle.net/mswyxp0u/8/

相关文章：