¿Por qué mis solicitudes jquery ajax se repiten varias veces?

Question

Estoy mirando la consola en Firebug cuando hago clic en una función que realiza una solicitud de AJAX. El problema es que un clic de un botón debería enviar 1 solicitud de ajax, pero recibo 2 solicitudes que se envían.

el código de mi js se parece a esto:

$(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); 
    } 
}); 


    }); 
}); 

que parece bastante sencillo ¿verdad?

En mi consola, sin embargo, veo 2 solicitudes GET desactivadas 1 clic.

Mi botón es simplemente:

<div class="book_now"></div> 

Me estoy perdiendo algo - no se supone que es de 2 peticiones GET?

¿Es por casualidad volver a cargar la función $ (document) .ready() cuando se carga el nuevo archivo y luego se vuelve a ejecutar la función de clic?

Nota: No hago doble clic en el botón. Probablemente no importe, pero si lo cambio a POST también lo hace dos veces.

Editar: la respuesta de 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> 

Nota: no hay nada en esta respuesta tiene ninguna función que se dispare a mi conocimiento. Soy escéptico de que la respuesta sea lo que se despide de la solicitud de ajax dos veces ... si la función de hacer clic solo se está ejecutando una vez, entonces no puede ser que el botón esté ejecutando la función dos veces, pero el $ .ajax() parte, es decir, la devolución de llamada de éxito que es. He actualizado el código JS para mostrar cómo he estructurado las cosas de console.log().

edición final:

Mi función ajax estaba envuelto en el interior de los siguientes:

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

    // ajax function 

    } 

no tenía ni idea, pero estaba llamando esta función para que cuando el #shade (mi thickbox) y el #booking_box entró corriendo el DOS VECES! :(

me siento como una herramienta

Gracias a todos por su ayuda

Answer 1

tuve mi función dentro de 2 divs con la siguiente JS

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

// ajax function 

} 

No me di cuenta que al hacer esto se ejecutaría dentro de la función 2 veces por cada div que se desvanecía en. ..

solución era:

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

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

     // ajax function 

    }); 

}); 

Answer 2

a algunas cosas podrían estar ocurriendo:...

1. El controlador de clic ha sido dos veces binded Cambio $('.book_now').click(function(){ a $('.book_now').unbind('click').click(function(){ para depurar. Más adelante podría refactorizar su código para usar $('.book_now').unbind('click',handler).click(handler);.

2. Se produce una redirección en el lado del servidor, lo que hace que aparezca como si se realizaran dos solicitudes ajax. Esto significa que console.log('inside') solo se ejecutará una vez.

3. El controlador de clics se activa dos veces. Para solucionar esto, agregue un punto de interrupción a su manejador de clics a través de Firebug o las herramientas de desarrollador de webkit y depúrelo manualmente. Podrá atravesar la "pila de llamadas" y descubrir si este es el caso.

Answer 3

favor quitar document.ready desde el código. Utilice la función simple:

$('.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 4

Tal vez alguien podría beneficiarse de mi experiencia.

Esto es donde conseguí:

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

 
SELECT 
onchange="someFunction()" 

Y me estaba causando una gran cantidad de peticiones. Para solucionarlo, eliminé el $("#item").change(function(){} dejando solo el código dentro de él

Answer 5

Cambie el atributo de clase a la identificación y ya no lo hará. Así es como lo rodearon.