Почему мои 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, и он больше не будет этого делать. Вот как обходилось.