1

当您将鼠标悬停在其行上时，我有一个带有按钮的表格。有一个调用自定义确认对话框的删除按钮；这基本上只接受确认删除时将执行的回调函数。

HTML如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    <body>
        <section>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Doe, Jane</td>
                        <td>
                            <div>
                                25
                                <span class="actions">
                                    <input type="button" value="Edit" class="btn-edit" />
                                    <input type="button" value="Delete" class="btn-delete" />
                                </span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Doe, John</td>
                        <td>
                            <div>
                                35
                                <span class="actions">
                                    <input type="button" value="Edit" class="btn-edit" />
                                    <input type="button" value="Delete" class="btn-delete" />
                                </span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Smith, John</td>
                        <td>
                            <div>
                                30
                                <span class="actions">
                                    <input type="button" value="Edit" class="btn-edit" />
                                    <input type="button" value="Delete" class="btn-delete" />
                                </span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>

        <!-- popups -->
        <div id="confirm-delete" class="popup confirm-dialog">
            <h3>Delete</h3>
            <div class="popup-content">
                <p class="confirm-message">Are you sure you want to delete this item?</p>
                <div class="buttons">
                    <input id="btn-delete-confirm" type="button" class="button btn-confirm" value="Delete" />
                    <input id="btn-delete-cancel" type="button" class="button btn-close-popup" value="Cancel" />
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/home.js"></script>
    </body>
</html>

JavaScript 代码：

$(document).ready(function(){
    var btnDelete = $('.btn-delete');

    btnDelete.on('click', function(e){
        var popUpId = 'confirm-delete',
                btn = $(e.currentTarget),
                item = $(e.currentTarget).closest('tr'),
                header = 'Delete Item',
                message = 'Are you sure you want to delete ' + item.find('.name').text() + '?';

        customConfirm(popUpId, header, message, function(){ deleteItem(item); });
    });
});

function customConfirm(id, header, message, callback){
    var popUp = $('#' + id),
            btnConfirm = popUp.find('.btn-confirm');

    popUp.find('h3').html(header);
    popUp.find('.confirm-message').html(message);
    popUp.append('<div class="mask"></div>');
    popUp.show();

    btnConfirm.on('click', {popUpId: id, callBack: callback}, confirmClick);

}

function confirmClick(e){
    e.data.callBack();
    closePopUp(e);
}

当我单击一项的删除按钮并确认其删除时，这工作正常。但是当我点击一个项目的删除按钮然后取消它时，点击另一个项目的删除按钮并确认，这两个项目都被删除了。每次我取消删除项目时都会发生这种情况。所以如果我取消删除三个项目并确认删除下一个项目，将删除四个项目。

对此的帮助将不胜感激。

谢谢 ：）

PS这是jsfiddle链接:)

4

3 回答 3

0

我认为这应该可行..我已经修改了你的js代码

http://jsfiddle.net/VKKpe/

改变了这个

 btnConfirm = popUp.find('.btn-confirm');

到

btnConfirm = $('#btn-delete-confirm');
于 2013-04-08T09:25:15.367 回答
0

发生的事情是，click之前显示的对话框中的处理程序仍附加到其“确认”按钮。当您单击该按钮时，所有先前的处理程序都将被触发，因此所有先前的删除都被确认。

您需要摆脱以前的处理程序，无论是在对话框被关闭时还是作为显示对话框的一部分。我认为，在显示表格时摆脱它可能更简单；.off('click')您可以在附加新的点击处理程序之前简单地说：

btnConfirm
    .off('click')
    .on('click', {popUpId: id, callBack: callback}, confirmClick);
于 2013-04-10T03:50:08.503 回答
0

我以前遇到过这个问题，这不是我真正想过的事情，我非常高兴我有机会帮助某人：

与 .on()绑定会添加一个绑定，而不是替换它。因此它将执行您过去绑定到它的所有内容。

简单的解决方案：btnConfirm.unbind('click');就在绑定之前。

工作示例：http: //jsfiddle.net/asifrc/VXsEB/8/

于 2013-04-10T03:50:17.223 回答