Question

我试图通过单击按钮（模态）来运行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

点击第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 -->

我不知道这是否有帮助，我第一次点击调用模态，第二次点击就是为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);
    });
});

按钮单击时功能重复

0 个答案: