Question

我使用的是一个类名为next且标识为end的链接。

在clcik上它的类名和id我正在使用jquery post。

我得到的问题有时是ajax请求在一次点击时多次触发。一次点击我从一个网址获取数据并同时将这些数据保存到另一个网址的数据库中。所以插入时有时会出现一些问题进入db.sometimes null值进入，有时多行进入db.So如何编写这两个函数，以便两者都能完美地工作？

$('.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', }

但这不是好习惯

同时在一个链接上的两个ajax帖子点击jquery

2 个答案: