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);
}

1 つのアイテムの削除ボタンをクリックして削除を確認すると、これは正常に機能します。しかし、アイテムの削除ボタンをクリックしてキャンセルし、別のアイテムの削除ボタンをクリックして確認すると、両方のアイテムが削除されます。アイテムの削除をキャンセルするたびに発生します。ですから、3 つのアイテムの削除をキャンセルして、次のアイテムの削除を確認すると、4 つのアイテムが削除されます。

これに関するヘルプをいただければ幸いです。

ありがとうございました ：）

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 に答える