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);