4

ユーザーがエンティティを削除しようとしたときに JavaScript が確認するのと同じように機能する単純なモーダルを設計しました。ユーザーが「削除」アイコンをクリックすると、アイコンのクリックイベントで次のモーダルが起動します。

ここに画像の説明を入力

ユーザーが [はい] をクリックすると、項目を削除する ajax 要求が送信されます。最初の ajax リクエストが送信されたときに完全に機能します。しかし、ユーザーが同じ操作を再度実行しようとすると、次の試行のために 2 つの要求が送信されます。何が問題なのかわかりません。

「削除アイコン」のHTMLは次のとおりです。

<a href="javascript:void(0)" class="btn btn-default">
<?php echo $item_name . " "; ?>
<i class="fa fa-times delete_item" data-url="<?php echo $url; ?>" data-item_id="<?php echo $item['id']; ?>" ></i></a>

モーダルの場合:

<div class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <h5 style="text-align:center;">Do you want to delete this item?</h5>
            <br />
            <div>
                <button type="button" class="btn btn-danger pull-right confirm_delete">Yes</button>
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">No</button>
            </div>
            <br />
        </div>
    </div>
</div>

ここに私のJavaScriptがあります:

$('body').on('click', '.delete_item', function(e){
e.preventDefault();
var url = $(this).data('url');
var data = 'item_id=' + $(this).data('item_id');
var btn = $(this);

$(btn).parents('form').children('.modal').modal('show');

$('.modal-body').on('click', '.confirm_delete', function(e){
    e.preventDefault();
    var confirm = $(this);
    $.ajax({
        type: 'post',
        url: url,
        data: data,
        dataType: 'json',
        cache: false,
        success: function(data){
            if(data.status)
            {
                $(btn).parent('.btn').remove();
            }
            else
            {
                alert('error');
            }
        },
        complete: function(){
            $(confirm).parents('.modal').modal('hide');
        }
    });
});

});

4

1 に答える 1

7

これは、2 つ目の削除ボタンがクリックされたときに複数のクリック イベント ハンドラーが登録されているためです。

off()1 つのソリューションとして使用して以前のハンドラーを削除する

$('body').on('click', '.delete_item', function (e) {
    e.preventDefault();
    var url = $(this).data('url');
    var data = 'item_id=' + $(this).data('item_id');
    var btn = $(this);

    $(btn).parents('form').children('.modal').modal('show');

    $('.modal-body').off('click.confirm').on('click.confirm', '.confirm_delete', function (e) {
        e.preventDefault();
        var confirm = $(this);
        $.ajax({
            type: 'post',
            url: url,
            data: data,
            dataType: 'json',
            cache: false,
            success: function (data) {
                if (data.status) {
                    $(btn).parent('.btn').remove();
                } else {
                    alert('error');
                }
            },
            complete: function () {
                $(confirm).parents('.modal').modal('hide');
            }
        });
    });
});
于 2014-01-21T06:51:26.327 に答える