2nd Submit Button Not Working on jQuery Click Event

Question

I am creating a quiz and can't figure out why one of my submit buttons won't work.

Here is how the quiz works:

On page load, the questions appear, with possible answers. When the user selects an answer and clicks "Submit", he or she gets feedback on if the answer was correct. A new button, named "next" is presented at the bottom of the page. When it is clicked, the next question in my array should display.

Here is the problem:

The "next" button isn't doing anything when clicked. I set up an alert to test the "next" button, but it's not showing.

The on click function is set up exactly like the previous one, which is working. I'm stumped.

Here is my 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

Marco Kerwitz · Accepted Answer · 2014-06-24 02:01:49Z

1

Depending on wether or not the next button is part of the DOM at the moment you append the event handler you may want to delegate the click event from its parent to the button. This way the event will be handled even on new elements added after the handler has been registered.

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

Also see the documentation for the deprecated .delegate() to which this functionality originates.

answered Jun 24, 2014 at 2:01

Marco Kerwitz

5,5742 gold badges20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yaje · Accepted Answer · 2014-06-24 02:01:23Z

0

this line :

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

});

change it to :

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

});

apparently you need to trigger that $(document) because that button is dynamically generated.

Working Fiddle

answered Jun 24, 2014 at 2:01

Yaje

2,82920 silver badges33 bronze badges

Collectives™ on Stack Overflow

2nd Submit Button Not Working on jQuery Click Event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related