Question

我使用jQuery ajax函数将数据发送到2个php脚本。第一个脚本将接收的数据插入MySQL数据库，第二个脚本发送电子邮件。 ajax函数附加到click事件。由于某些未知原因，即使我只点击一次，有时会有2或3个数据库条目和发送的电子邮件。正如您所看到的，第二个ajax调用嵌入到第一个中。我试着并行使用它们。尝试没有'设置超时'-s。我也在这里使用simplemodal插件。当第一个模态关闭时，第二个模态打开。

有没有办法确保click事件只触发一次或在成功调用1后阻止ajax请求？

以下是代码的一部分：

$('#confirm').click(function () {

    $('#loading').html("<img style = 'display:inline-block;' src = 'img/loading.gif' />");
    var servtype = $('select option:selected').text();

    $('#type').text(servtype);
    $('#staff_name').text(staff_name);
    $('#day_time').text(a);
    $('#day_date').text(nap + ', ' + dateText);
    $('#type1').text(servtype);
    $('#staff_name1').text(staff_name);
    $('#day_time1').text(a);
    $('#day_date1').text(nap + ', ' + dateText);
    var message = $('#message').val();

    $.ajax({
        type: 'GET',
        async: true,
        url: 'add_booking.php',
        data: 'message=' + message + '&date=' + dateText + '&start_end=' + a + '&personid=' + personid + '&servid=' + servid,
        success: function (msg) {
            var obj = jQuery.parseJSON(msg);
            alert('' + obj.answer);
            setTimeout(function () {
                $.ajax({
                    type: 'GET',
                    async: true,
                    url: 'send_email.php',
                    data: 'email=zolkazlk@gmail.com&type=' + servtype + '&person=' + staff_name + '&time=' + a + '&date=' + nap + ', ' + dateText,
                    success: function (msg) {
                        var obj = jQuery.parseJSON(msg);
                        alert('' + obj.answer);
                        $.modal.close();
                        window.setTimeout(function () {
                            jQuery('#receipt').modal()
                        }, 50);
                    }
                });
            }, 200);
        }
    });
});

Answer 1

有一个jquery函数可以对ajax调用进行排队，我相信你可以使用它。

以下是代码：

var ajaxQueue = $({});
var currAjaxCalls = [];
var count = 0;
$.ajaxQueue = function(ajaxOpts) {
    count++
    if(ajaxOpts.dequeue == true && count > 0) {

        for(var i=0; i<currAjaxCalls.length; i++) {
            currAjaxCalls[i].abort();
        }
        ajaxQueue.dequeue();
    }
        // hold the original complete function
        var oldComplete = ajaxOpts.complete;
        var oldBeforeSend = ajaxOpts.beforeSend;
        count++;
        // queue our ajax request
        ajaxQueue.queue(function(next) {
            // create a complete callback to fire the next event in the queue
            ajaxOpts.complete = function() {
                // fire the original complete if it was there
                /*if (oldComplete) {
                    currAjaxCalls.slice(1);
                    oldComplete.apply(this, arguments);
                }*/
                $('.cloader').hide();
                next(); // run the next query in the queue
            };
            ajaxOpts.beforeSend = function() {
                if (oldBeforeSend) {
                    currAjaxCalls.slice(1);
                    oldBeforeSend.apply(this, arguments);
                }
            };

            // run the query
            currAjaxCalls[currAjaxCalls.length] = $.ajax(ajaxOpts);
        });
};
$.clearAjaxQueue = function() {
    $.ajaxQueue("dequeue");
};

Answer 2

$('#confirm').die('click').live('click', function(){....})

最后，在您的成功回电中，您可以再次$('#confirm').die('click')。

此解决方案可确保您不会发生任何其他不需要的事件。我正在使用这种解决方案，因为安全性高。毫无疑问，解决问题而不是这样的黑客攻击会更好，但有时它非常耗费时间并且您不喜欢跟踪您的团队成员代码。

事件有时会被触发多次

2 个答案: