Pourquoi mes requêtes jquery ajax s'exécutent-elles plusieurs fois?

Question

Je regarde la console dans firebug lorsque je clique sur une fonction qui effectue une requête ajax. Le problème est, qu'un clic d'un bouton devrait envoyer une requête ajax, mais je reçois 2 demandes envoyées!

Le code pour mes js ressemble à ceci:

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


    }); 
}); 

Ce qui semble assez en avant droite droite?

Dans ma console, cependant, je vois 2 demandes GET de 1 clic.

Mon bouton est simplement:

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

Suis-je manque quelque chose - est-il censé être 2 requêtes GET?

Est-ce que c'est par hasard charger à nouveau la fonction $ (document) .ready() quand le nouveau fichier est chargé et donc exécuter à nouveau la fonction de clic?

Remarque: Je ne clique pas deux fois sur le bouton. Cela n'a probablement pas d'importance, mais si je le change en POST, il le fait deux fois aussi.

Edit: la réponse 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> 

Note: rien dans cette réponse a des fonctions déclenchement à ma connaissance. Je suis sceptique que la réponse est ce qui déclenche la requête ajax deux fois ... si la fonction de clic ne s'exécute qu'une fois, alors il ne peut pas être le bouton exécute la fonction deux fois, mais le $ .ajax() partie, à savoir le rappel de succès qui est. J'ai mis à jour le code JS pour montrer comment j'ai structuré le truc de console.log().

FINAL EDIT:

Ma fonction ajax a été enveloppé dans des éléments suivants:

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

    // ajax function 

    } 

Je n'avais aucune idée, mais il a été d'appeler cette fonction pour quand le #shade (mon thickbox) et le #booking_box est entré en cours d'exécution deux fois! :(

Je me sens comme un outil

Merci de tout le monde pour votre aide

Answer 1

J'ai eu ma fonction à l'intérieur 2 divs avec le suivant JS

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

// ajax function 

} 

Je ne savais pas que, en faisant cela, il exécuterait dans la fonction 2 fois pour chaque div je Fading dans. ..

solution a été:

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

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

     // ajax function 

    }); 

}); 

Answer 2

Quelques choses pourraient se produire:...

1. Le gestionnaire de clic a été binded deux fois le changement $('.book_now').click(function(){ à $('.book_now').unbind('click').click(function(){ pour plus tard, vous pouvez refactoriser votre code pour utiliser $('.book_now').unbind('click',handler).click(handler);

2. Il y a une redirection se produisant du côté du serveur, provoquant l'apparition de deux requêtes ajax. Cela signifierait que console.log('inside') ne fonctionnerait qu'une seule fois.

3. Le gestionnaire de clic est en cours de déclenchement deux fois. Pour déboguer ceci, ajoutez un point d'arrêt à votre gestionnaire de clic via les outils de développement de firebug ou de webkit et déboguez-le manuellement. Vous serez capable de parcourir la "pile d'appels" et de découvrir si c'est le cas.

Answer 3

S'il vous plaît supprimer document.ready de votre code. Utilisez la fonction 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

Peut-être que quelqu'un pourrait bénéficier de mon expérience.

C'est là que je suis:

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

 
SELECT 
onchange="someFunction()" 

Et me causait beaucoup de demandes. Pour résoudre ce problème, j'ai supprimé le $("#item").change(function(){} en laissant juste le code à l'intérieur de celui-ci

Answer 5

Changez votre attribut de classe à id et il ne le fera plus. C'est comme ça que ça s'est passé.