Блог

Я создаю тест и не могу понять, почему одна из моих кнопок отправки не будет работать.

Вот как работает тест:

При загрузке страницы появляются вопросы с возможными ответами. Когда пользователь выбирает ответ и нажимает «Отправить», он или она получает обратную связь о том, был ли ответ правильным. Внизу страницы представлена новая кнопка с именем «далее». При нажатии на нее должен отобразиться следующий вопрос в моем массиве.

Вот в чем проблема:

Кнопка «далее» ничего не делает при нажатии. Я настроил оповещение для проверки кнопки «далее», но оно не отображается.

Функция on click настроена точно так же, как и предыдущая, которая работает. Я в тупике.

Вот мой 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
  

В зависимости от того, является ли следующая кнопка частью DOM в момент добавления обработчика событий, вы можете захотеть делегировать событие щелчка от его родительского элемента кнопке. Таким образом, событие будет обрабатываться даже для новых элементов, добавленных после регистрации обработчика.

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

Также см. Документацию для устаревшего .делегировать (), к которому относится эта функциональность.

эта строка :

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

});

измените его на :

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

});

по-видимому, вам нужно вызвать это $(document) , потому что эта кнопка генерируется динамически.

Рабочая скрипка