Почему мои jquery-запросы ajax выполняются несколько раз?
Я смотрю консоль в firebug, когда я нажимаю на функцию, которая выполняет запрос ajax. Проблема в том, что одним нажатием кнопки следует отправить 1 запрос ajax, но я получаю 2 отправленных запроса!
Код для моего js выглядит так:
$(document).ready(function() {
$('.book_now').click(function(){
$.ajax({
type: 'POST',
url: '/booking.php',
data: 'event_id='+event_id+'&time_id='+time_id,
success: function(data) {
console.log('inside');
$('#booking_box_content').html(data);
}
});
});
});
Которое кажется прямолинейным прямо?
В моей консоли, однако, я вижу два запроса x GET с 1 кликом.
Моя кнопка просто:
<div class="book_now"></div>
Я что-то упустил - есть ли 2 запроса GET?
Может ли он случайно загрузить функцию $(document).ready() снова, когда загружается новый файл, и для повторного выполнения функции click?
Примечание. Я не дважды нажимаю кнопку. Это, вероятно, не имеет значения, но если я изменю его на POST, он сделает это дважды.
Изменить: ответ от booking.php
<div id="booking_box_left">
<h1 class="speaker_name"></h1>
<h1 class="event_name"></h1>
<div class="event_start_header">Start</div><div id="event_start_datetime">, </div>
<div class="cleared"></div>
<div class="event_end_header">End</div><div id="event_end_datetime">, </div>
<div class="cleared"></div>
<div class="event_where_header">Where</div><div id="event_where"><strong></strong><br /><br />
</div>
</div>
<div id="booking_box_right_container">
<form id="booking_form_1" method="post">
<input type="hidden" name="booking_id" value="7a614fd06c325499f1680b9896beedeb" />
<input type="hidden" name="event_id" value="" />
<input type="hidden" name="time_id" value="" />
<div id="booking_box_right">
<h1>To reserve your seat</h1>
<input type="text" name="booking_email" class="enterSomething booking_email" title="Enter your email..." />
<div class="booking_email_helper">On clicking next a ticket will be held for you for a short period for you to complete your registration.</div>
<input type="submit" id="next" value="Next" />
</div>
</form>
</div>
Примечание. Ничто в этом ответе не вызывает каких-либо функций, которые мне известны. Я скептически отношусь к тому, что ответ - это то, что два раза отключает запрос ajax... если функция щелчка работает только один раз, то не может быть, что кнопка выполняет функцию дважды, но $.ajax() частью, а именно обратным вызовом успеха. Я обновил JS-код, чтобы показать, как я структурировал материал console.log().
ЗАВЕРШЕНИЕ:
Моя функция ajax была обернута внутри следующего:
$('#shade, #booking_box').fadeIn(function(){
// ajax function
}
Я понятия не имел, но это вызывало эту функцию, потому что при этом появлялся #shade (мой толстый бокс) и #booking_box, поэтому он работал TWICE!: (
Я чувствую себя таким инструментом.
Спасибо всем за вашу помощь.
Ответы
Ответ 1
У меня была моя функция внутри 2 divs со следующим JS
$('#shade, #booking_box').fadeIn(function(){
// ajax function
}
Я не понял, что, выполняя это, он выполнял бы внутри функции 2 раза для каждого div, в котором я исчезал...
Решение было:
$('#shade').fadeIn(function(){
$('#booking_box').fadeIn(function() {
// ajax function
});
});
Ответ 2
Несколько вещей могут произойти:
-
Обработчик кликов дважды привязан. Измените $('.book_now').click(function(){
на $('.book_now').unbind('click').click(function(){
для отладки. Позже вы могли бы реорганизовать свой код на использование $('.book_now').unbind('click',handler).click(handler);
.
-
На стороне сервера возникает перенаправление, в результате чего появляется, как если бы выполнялось два запроса ajax. Это означало бы, что console.log('inside')
будет работать только один раз.
-
Обработчик кликов запускается дважды. Чтобы отладить это, добавьте точку останова в обработчик кликов с помощью средств разработки firebug или webkit и отлаживайте его вручную. Вы сможете пройти "стек вызовов" и узнать, действительно ли это так.
Ответ 3
Удалите document.ready
из своего кода. Используйте простую функцию:
$('.book_now').click(function(){
$.ajax({
type: 'POST',
url: '/booking.php',
data: 'event_id='+event_id+'&time_id='+time_id,
success: function(data) {
console.log('inside');
$('#booking_box_content').html(data);
}
});
});
Ответ 4
Возможно, кто-то может извлечь выгоду из моего опыта.
Вот где я получил:
SCRIPT
function someFunction(){
$("#item").change(function(){
// Function with Ajax Request
}
}
SELECT
onchange="someFunction()"
И вызвало у меня много запросов.
Чтобы исправить это, я удалил $("#item").change(function(){}
, оставив только код внутри него
Ответ 5
Измените атрибут class на id, и он больше не будет этого делать. Вот как обходилось.