Почему мои запросы jquery ajax выполняются несколько раз?

Question

Я смотрю на консоль в 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);
  }
});


  });
});

Что кажется довольно прямым, верно?

В моей консоли, однако, я вижу 2 x GET-запроса от одного клика.

Моя кнопка просто:

<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, и, следовательно, запустили его ДВАЖДЫ! (

Я чувствую себя таким инструментом.

Спасибо всем за помощь.

Answer 1

Может произойти несколько вещей:

1. Обработчик щелчков был связан дважды. Измените $('.book_now').click(function(){ на $('.book_now').unbind('click').click(function(){ для отладки. Позже вы можете изменить код для использования $('.book_now').unbind('click',handler).click(handler);.

2. На стороне сервера происходит перенаправление, в результате чего создается впечатление, что выполняются два запроса ajax. Это будет означать, что console.log('inside') будет выполняться только один раз.

3. Обработчик щелчков запускается дважды. Чтобы отладить это, добавьте точку останова в ваш обработчик кликов с помощью Firebug или инструментов разработчика webkit и отладьте ее вручную. Вы сможете пройти «стек вызовов» и выяснить, так ли это.

Answer 2

Пожалуйста, удалите 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);
    }
  });
});

Answer 3

У меня была функция внутри 2 делений со следующим JS

$('#shade, #booking_box').fadeIn(function(){

 // ajax function

}

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

Решение было:

$('#shade').fadeIn(function(){

     $('#booking_box').fadeIn(function() {

        // ajax function

     });

});

Answer 4

Измените свой атрибут класса на id, и он больше этого не сделает. Вот как это обошлось.

Answer 5

Может быть, кто-то мог бы извлечь пользу из моего опыта.

Вот где я получил:

SCRIPT
    function someFunction(){
      $("#item").change(function(){
        // Function with Ajax Request
      }
    }

SELECT
onchange="someFunction()"

И вызывал у меня много запросов.Чтобы исправить это, я удалил $("#item").change(function(){}, оставив в нем только код