jQuery通过Bootstrap Confirmation框获取数据ID(有一个扭曲) [英] Jquery getting the data id with Bootstrap Confirmation box (with a twist)

问题描述

我正在使用引导确认插件，并且我有一个带有列表的表的用户.其中一列有一个删除按钮，该按钮指向一个链接以删除用户，但是在删除用户之前，我需要确认框.我只想使用一个针对每个按钮弹出的确认对话框，并且要将用户ID的链接分配给删除按钮.

I am using bootstrap confirmation plugin, and I have a table with a list of users. One of the columns has a delete button which goes to a link to delete the user, but before deleting the user I have a confirmation box which needs to be clicked. I want to just use one confirmation dialog that pops up for every button and I want to assign the link of the user id to the delete button.

现在的问题是，整个表格都在一个表格中，可以多次删除.因此，我无法为每个删除按钮设置单独的表单.

<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>[e-mail]</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>[e-mail]</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/

Here is link to jsfiddle/full code: http://jsfiddle.net/mswyxp0u/

推荐答案

我可以想到一个解决方案.就是这样:首先将singleton确认选项设置为true.将其设置为true将导致:

I can think of a solution. So here it is : Firstly set the singleton option for confirmation to true. Setting it to true will result in :

设置为true一次只能显示一个确认.

Set true to allow only one confirmation to show at a time.

单击最新的确认元素，旧的确认元素将消失.

When the newest confirmation element is clicked, the older ones will disappear.

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

Now we know that only one confirmation box will appear at one time. So now create a global variable to store last clicked delete button attribute for id(data-id). Now bind a event to click of that delete then store data-id inside global variable as you can use easily $(this).data("id") in click event.

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

Now use this global variable inside onConfirm or onCancel as you can confirm/cancel only after clicking delete button and now if only one confirmation box will appear at a time that means the confirm/cancel callback will be for last clicked button only.

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

这篇关于jQuery通过Bootstrap Confirmation框获取数据ID(有一个扭曲)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！