第二个提交按钮不工作的jQuery点击事件

2nd Submit Button Not Working on jQuery Click Event

本文关键字：jQuery 事件工作提交按钮第二个更新时间：2023-09-26

我正在创建一个测验，不知道为什么我的一个提交按钮不起作用。

测试是这样进行的:

页面加载时，出现了问题和可能的答案。当用户选择一个答案并点击"提交"时，他或她就会得到答案是否正确的反馈。一个名为"next"的新按钮出现在页面底部。当它被单击时，我的数组中的下一个问题应该显示出来。

问题是:

点击"next"按钮时不做任何事情。我设置了一个警报来测试"下一步"按钮，但它没有显示。

点击功能的设置与前一个完全相同，它正在工作。我难住了。

这是我的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的一部分，在您追加事件处理程序的时候，您可能想要将click事件从它的父事件委托给按钮。这样，即使在注册处理程序后添加了新元素，也可以处理该事件。

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

另请参阅文档，了解此功能起源于已弃用的.delegate()。

这一行:

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

工作小提琴