0

ボタンをクリックして ajax 関数を実行しようとしています (モーダル)。奇妙なことに、ボタンをクリックすると、機能が完全に実行されます。
しかし、ボタンをもう一度クリックすると関数が 2 回実行され、もう一度クリックすると関数が 3 回実行されます。

コードは次のとおりです。

$('#delClient').click(function(event){
    event.preventDefault();
    $('#delClntMod').modal('hide');
    doDelete(json);
});

doDelete() 関数は次のとおりです。

function doDelete(json) {
    $.ajax({
        type: 'POST',
        url: '/clients/delClient',
        data: json,
        dataType: 'json',
        timeout: 7000,
        success: function (data) {
            if (data.xstatus == 'success') {
                var options = {};
                $('#client-' + data.clientId).effect('highlight', options, 2500, callback);
            }
            $(this).queue(function () {

                $('#message-title').html(data.messageTitle);
                $('#message-body').html(data.message);
                $("#message").addClass("alert-" + data.xstatus);
            }).queue(function () {
                $('#message').removeClass('hidden');
            });
            $(this).dequeue();

            // run the effect
            $("#message").delay(6000).slideUp('slow', function () {
                $('#message').css('display', '');
                $('#message').addClass('hidden');
                $("#message").removeClass("alert-" + data.xstatus);
                $('#message-title').html('');
                $('#message-body').html('');
            });

            function callback() {
                $('#client-' + data.clientId).fadeOut(500, function () {
                    $('#client-' + data.clientId).remove();
                });
            };
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {},
        complete: function (XMLHttpRequest, status) {}
    });
}

ボタンを 3 回クリックした後のコンソール ログは次のとおりです。

POST http://aum-crm.dev/users/userDelete 200 OK 170ms   
POST http://aum-crm.dev/users/userDelete 200 OK 628ms   
POST http://aum-crm.dev/users/userDelete 200 OK 214ms

ボタンを3回クリックしてコンソールをクリアした後です。ワンクリックでこの結果が得られました。

モーダルの HTML コードは次のとおりです。

<!-- Modal -->
<div class="modal fade" id="delClntMod" tabindex="-1" role="dialog" aria-labelledby="delUsrModLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><?php echo t('delClient'); ?></h4>
            </div>
            <div class="modal-body">
                <strong><?php echo t('rusure', 'client'); ?></strong>
            </div>
            <div class="modal-footer">
                <button id="delClient" type="button" class="btn btn-danger"><?php echo t('delete'); ?></button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo t('cancel');?></button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

それが役立つかどうかはわかりません。最初のクリックでモーダルを呼び出し、2 回目のクリックで doDelete 関数を呼び出しています。

$(".delclnt").click(function( event ) {
    event.preventDefault();

    $.get('/main/checkSession', function(data) {
        if( data == "Expired" ) {
            window.location.replace("main");
        }
    });

    var url = $(this).attr('id').split('-');
    action = url[0];
    clientId = url[1];

    var json = {};

    json.action = action;
    json.clientId = clientId;

    $('#delClient').click(function(event){
        event.preventDefault();
        $('#delClntMod').modal('hide');
        doDelete(json);
    });
});
4

0 に答える 0