第二个提交按钮不适用于jQuery Click事件

Question

我正在创建测验，无法弄清楚为什么我的提交按钮之一不起作用。

这是测验的工作方式：

在页面加载时，出现问题以及可能的答案。 当用户选择答案并单击“提交”时，他或她会收到有关答案是否正确的反馈。 页面底部显示一个名为“下一个”的新按钮。 单击它后，应该显示我数组中的下一个问题。

这是问题所在：

单击“下一步”按钮后无任何反应。 我设置了一个警报以测试“下一个”按钮，但未显示。

单击功能的设置与上一个功能完全相同，可以正常使用。 我很沮丧

这是我的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

在添加事件处理程序时，取决于是否（是）下一个按钮是否是DOM的一部分，您可能希望将click事件从其父项委派给按钮。 这样，即使在处理程序注册后添加了新元素，事件也将得到处理。

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

另请参阅此功能源自的不推荐使用的.delegate（）文档。

Answer 2

这条线：

$("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)因为该按钮是动态生成的。

工作小提琴