Question

我正在使用bootstrap confirmation plugin，我有一个包含用户列表的表。其中一列有一个删除按钮，用于删除用户的链接，但在删除用户之前，我有一个需要点击的确认框。我想只使用一个弹出每个按钮的确认对话框，我想将用户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/

Answer 1

我能想到一个解决方案。所以这里是：首先将singleton选项设置为true以确认。将其设置为true将导致：

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

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

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

现在在onConfirm或onCancel中使用此全局变量，因为只有在单击删除按钮后才能确认/取消，现在如果只有一个确认框出现，则表示确认/取消回调仅用于最后一次单击按钮。

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

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

1 个答案: