第二次提交按钮不工作在jQuery单击事件

Question

我正在创建一个测验，并不能找出为什么我的一个提交按钮不起作用。

这里是测验是如何工作的：

在网页加载时，问题出现，有可能的答案。当用户选择答案并点击“提交”时，他或她会得到关于答案是否正确的反馈。页面底部会出现一个名为“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 

Answer 1

根据羯羊或不是下一个按钮，在你追加，你可能想从母公司到按钮委托点击事件的事件处理的那一刻DOM的一部分。 这种方式即使在注册处理程序之后添加的新元素也会处理该事件。

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

工作Fiddle