第二個提交按鈕不適用於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)因為該按鈕是動態生成的。

工作小提琴