在一個鏈接上同時單擊兩個ajax發布jquery

Question

我正在使用一個鏈接，鏈接的類名稱為next ，id為end 。

關於clcik它的類名和ID我正在使用jquery post。

我遇到的問題是，有時ajax請求會一鍵觸發多次。一鍵單擊時，我會從一個URL獲取數據，並同時通過另一個URL將這些數據保存到db中。因此有時在插入db時會遇到一些問題。有時會輸入null值，有時會向db中輸入多行。那么我該如何編寫這兩個函數，以便兩者都能正常工作？

$('.next').live('click', function (e) {
    e.preventDefault();
    var result = [];
    var answer = [];
    var le = '';
    $('.answertext').each(function (index, element) {
        result.push($(this).val());
    });

    $('.answer').each(function (index, element) {
        answer.push($(this).val());
    });
    le = $('#level').val();
    mle = $('#mainlevel').val();
    $.ajax({
        url: 'matchanswers.php',
        type: 'POST',
        data: {
            result: result,
            answer: answer,
            level: le,
            mle: mle
        },
        async: true,
        beforeSend: function () {
            // show indicator
        },
        complete: function () {
            // hide indicator
        },
        success: function (data) {
            $('.quizform').html(data);
        }
    });
});

$('#end').live('click', function (e) {
    e.preventDefault();
    var sublev = $('#level').val();
    var score = $('#count').val();
    if (sublev < 11) {
        $.ajax({
            url: 'submitanswers.php',
            type: 'POST',
            data: {
                sublev: sublev,
                score: score
            },
            async: true,
            beforeSend: function () {
                // show indicator
            },
            complete: function () {
                // hide indicator
            },
            success: function (data2) {}
        });
    } else {
        $.ajax({
            url: 'getanswers.php',
            type: 'POST',
            data: {
                sublev: sublev,
                score: score
            },
            async: true,
            beforeSend: function () {
                // show indicator
            },
            complete: function () {
                // hide indicator
            },
            success: function (data3) {
                if (data3) {
                    $('.quizform').html("");
                    $('form :input').attr('disabled', 'disabled');
                    $('#logout').removeAttr("disabled");
                    var obj = $.parseJSON(data3);
                    $('#sum').html("Your Total Score for level - " + obj[0] + " is " + obj[1] + " in " + obj[2] + "secs");
                }
            }
        });
    }
});

Answer 1

只需檢查事件觸發器，例如：

$('.next').live('click', function (e) {
    if(e.handled !== true){ // This will prevent event triggering more then once
        e.handled = true;
        //Your code

    }
});



$('#end').live('click', function (e) {
    if(e.handled !== true){ // This will prevent event triggering more then once
        e.handled = true;
        //Your code

    }
});

這樣，您將停止多個事件觸發，這是一個很常見的問題，應該可以解決您的問題。

編輯：

您的完整代碼為：

$('.next').live('click', function (e) {
    if (e.handled !== true) { // This will prevent event triggering more then once
        e.handled = true;
        //Your code

        e.preventDefault();
        var result = [];
        var answer = [];
        var le = '';
        $('.answertext').each(function (index, element) {
            result.push($(this).val());
        });

        $('.answer').each(function (index, element) {
            answer.push($(this).val());
        });
        le = $('#level').val();
        mle = $('#mainlevel').val();
        $.ajax({
            url: 'matchanswers.php',
            type: 'POST',
            data: {
                result: result,
                answer: answer,
                level: le,
                mle: mle
            },
            async: true,
            beforeSend: function () {
                // show indicator
            },
            complete: function () {
                // hide indicator
            },
            success: function (data) {
                $('.quizform').html(data);
            }
        });

    }
});



$('#end').live('click', function (e) {
    if (e.handled !== true) { // This will prevent event triggering more then once
        e.handled = true;
        //Your code

        e.preventDefault();
        var sublev = $('#level').val();
        var score = $('#count').val();
        if (sublev < 11) {
            $.ajax({
                url: 'submitanswers.php',
                type: 'POST',
                data: {
                    sublev: sublev,
                    score: score
                },
                async: true,
                beforeSend: function () {
                    // show indicator
                },
                complete: function () {
                    // hide indicator
                },
                success: function (data2) {}
            });
        } else {
            $.ajax({
                url: 'getanswers.php',
                type: 'POST',
                data: {
                    sublev: sublev,
                    score: score
                },
                async: true,
                beforeSend: function () {
                    // show indicator
                },
                complete: function () {
                    // hide indicator
                },
                success: function (data3) {
                    if (data3) {
                        $('.quizform').html("");
                        $('form :input').attr('disabled', 'disabled');
                        $('#logout').removeAttr("disabled");
                        var obj = $.parseJSON(data3);
                        $('#sum').html("Your Total Score for level - " + obj[0] + " is " + obj[1] + " in " + obj[2] + "secs");
                    }
                }
            });
        }

    }
});

Answer 2

即使ID和類別不同，您也要觸發相同的點擊，鏈接是相同的。

 $('.next').live('click', function(e) 

觸發一個ajax調用，

$('#end').live('click', function(e)

觸發另一個，您可以做的就是在另一個成功的情況下觸發一個ajax

$('.next').live('click', function(e)  { ...
     success: function(data) { $.ajax({
                url: 'submitanswers.php', }

但這不是一個好習慣