2e bouton Soumettre Ne fonctionne pas sur l'événement jQuery Click

Question

Je crée un quiz et je n'arrive pas à comprendre pourquoi l'un de mes boutons d'envoi ne fonctionnera pas.

Voici comment le jeu-questionnaire fonctionne:

Sur chargement de la page, les questions apparaissent, avec des réponses possibles. Lorsque l'utilisateur sélectionne une réponse et clique sur "Soumettre", il reçoit des commentaires si la réponse est correcte. Un nouveau bouton nommé "next" est présenté en bas de la page. Quand il est cliqué, la question suivante dans mon tableau devrait s'afficher.

Voici le problème:

Le bouton « suivant » ne fait rien quand on clique dessus. J'ai mis en place une alerte pour tester le bouton "suivant", mais ce n'est pas visible.

La fonction OnClick est configurée exactement comme la précédente, qui fonctionne. Je suis perplexe.

Voici mon JSFiddle: http://jsfiddle.net/amykirst/3eubj/2/.

$(document).ready(function() { 

    showQuestion(); 

    // When user clicks submit, grade the question 
    $("input[name='submit']").click(function() { 
    //alert("line 118: I clicked on submit"); 
    gradeQuestion(); 
    }); 

    // When user clicks "Next Question", show next question 
    $("input[name='next']").click(function() { 
    alert("line 124: I clicked on next"); 
    // update currentQuestion to next question 
    currentQuestion++; 
    //show question 
    showQuestion(); 
    }); 

    // Prevent form from refreshing page 
    $("form").submit(function(e) { 
    e.preventDefault(); 
    }); 

}); // end document ready 

Answer 1

Selon ou non le wether bouton suivant fait partie du DOM au moment où vous ajoutez le gestionnaire d'événements, vous pouvez déléguer l'événement de clic de son parent au bouton. Ainsi, l'événement sera traité même sur de nouveaux éléments ajoutés après l'enregistrement du gestionnaire.

$('.container').on('click', 'input[name="next"]', function (e) { 
    alert('Load next question now!'); 
}); 

Voir aussi la documentation du .delegate() dépréciée auquel cette fonctionnalité origine.

Answer 2

cette ligne:

$("input[name='next']").click(function() { 
alert("line 124: I clicked on next"); 
// update currentQuestion to next question 
currentQuestion++; 
//show question 
showQuestion(); 

});

changement à:

$(document).on("click","input[name='next']",function() { 
alert("line 124: I clicked on next"); 
// update currentQuestion to next question 
currentQuestion++; 
//show question 
showQuestion(); 

});

apparemment vous devez déclencher ce $(document) parce que ce bouton est généré dynamiquement.

travail Fiddle