0

我正在尝试通过单击按钮（模式）来运行 ajax 函数。奇怪的是，如果我点击按钮，功能运行完美。
但是，如果我再次单击该按钮，该功能将运行两次，如果我再次单击该按钮，该功能将运行 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

这是在第三次单击按钮并清除控制台之后。因此，只需单击一下，我就得到了这个结果。

模态的 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 -->

我不知道这是否有帮助，我第一次单击以调用模态，第二次单击以使 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