jQuery删除多个项而不是一个

时间:2013-04-08 07:43:56

标签: html jquery

我有一张桌子,当你将鼠标悬停在它的行上时会有按钮。有一个删除按钮,可以调用自定义确认对话框;这基本上只接受在确认删除时它将执行的回调函数。

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链接:)

3 个答案:

答案 0 :(得分:0)

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

http://jsfiddle.net/VKKpe/

改变了这个

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

btnConfirm = $('#btn-delete-confirm');

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

我之前遇到过这个问题,这不是我真正想过的事情,我很高兴我有机会帮助有人:

绑定.on()添加绑定,不替换它。所以它将执行你过去绑定它的所有内容。

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

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