JQuery запрос на отправку дважды

$("#classesLink").click(function(event) {
    $("#globalUserContent").children().slideUp("normal", function() {
        $.ajax({
            type: "POST",
            url: "classes.php?token="+randString+"",
            success: function (msg) {
                $("#globalUserContent").html(msg);
            },
            error: function (msg) {
                $("#globalUserContent").html(msg);
            }
        });            
    });
    return false;
});

У меня есть вышеуказанный код, и когда я нажимаю .classesLink Кнопка и проверьте запросы Firebug, он показывает, что он подается дважды, есть ли что-то не так с этим?

2 ответа

Решение

Как отметил @am не я. $("#globalUserContent") имеет двух детей, поэтому обратный вызов запускается дважды по одному для каждого ребенка, используйте это:

$("#classesLink").click(function(event) {
    $.when($("#globalUserContent").children().slideUp("normal"))
     .then(function() {
        $.ajax({
            type: "POST",
            url: "classes.php?token="+randString+"",
            success: function (msg) {
                $("#globalUserContent").html(msg);
            },
            error: function (msg) {
                $("#globalUserContent").html(msg);
            }
        });            
    });
    return false;
});

Это выполнит запрос callback- ajax, когда slideUp эффект закончен, и не жестко setTimeout задержка в коде.

Если вы жестко закодировали 600 в коде код может сломаться, если "normal" продолжительность изменится однажды, или кто-то изменил slideUp эффект продолжительности, но не изменил задержку тайм-аута.

Но вы можете поместить задержку в переменную, чтобы изменить ее в одном месте - @am, я не советую.

when документы:

Описание: Предоставляет способ выполнения функций обратного вызова на основе одного или нескольких объектов, обычно отложенных объектов, которые представляют асинхронные события.

Это...

$("#globalUserContent").children()

... вероятно соответствует 2 элементам, поэтому обработчик запускается дважды.


Вы можете использовать setTimeout вместо.

$("#globalUserContent").children().slideUp("normal");

setTimeout(function() {
        $.ajax({
            type: "POST",
            url: "classes.php?token="+randString+"",
            success: function (msg) {
                $("#globalUserContent").html(msg);
            },
            error: function (msg) {
                $("#globalUserContent").html(msg);
            }
        });
}, 600);
Другие вопросы по тегам