我正在制作一个主干测验应用程序，它使用下面的 question_template 将问题附加到 div 中。回答第一个问题后，将附加第二个问题，将第一个问题推到下方，依此类推。一旦到达第三个问题，html 单选按钮就会中断。我无法为第三个问题选择顶部按钮（红色答案）。但是，一旦加载了第四个问题，并且第三个问题被按下，我就可以为第三个问题选择红色按钮（尽管您无法再提交，因为在回答问题后提交被设计禁用）。在第四个问题中，我无法选择前两个单选按钮中的任何一个。我在每个浏览器中都有同样的问题。我已经发布了加载第 3 和第 4 个问题的屏幕图像。我想知道是否有'
更新：在你阅读所有内容之前，知道单选按钮的问题只有在我使用 prepend 即 $('this.el').prepend 将问题呈现给 div 时才会发生，我想这样做以添加问题到顶部。如果我使用 append $('this.el').append... 单选按钮可以正常工作，但它不允许我在顶部添加新问题。
代码。！[
<fieldset id="qbquestion">
<legend>{{= question }}</legend>
<ul>
{{ _.each(answers, function(answer) { }}
<li><input type="radio" name="{{= question }}" value="{{= answer }}"/> <label for="{{= answer }}">{{= answer }}</label></li>
{{ }); }}
</ul>
</fieldset>
<input type="button" class="action_button" value="Submit" id="answer">
</script>][1]
图片说明
对于“M 最喜欢的颜色是什么”这个问题，我无法选择“红色”按钮，直到它被按下。对于最重要的问题，我无法选择前两个按钮“粉红色”或“紫色”中的任何一个。目前数据库中只有四个问题。
更新这是问题“什么是 M 最喜欢的颜色”的“红色”单选按钮（无法选择的那个）的 CSS 样式。如果我检查不同的单选按钮，样式是相同的。
更新问题的 html，“什么是 M 最喜欢的颜色”
QuestionView更新，在渲染函数中，如果我使用 $('this.el').append...，那么生成的单选按钮将起作用。但是，我想这样做$('this.el').prepend，将新问题添加到顶部。如果我使用前置，某些单选按钮不起作用。
var QuestionView = Backbone.View.extend({
el: $(".east"),
initialize: function(){
_.bindAll(this);
this.compTemplates();
this.model.bind("gameStartedEvent", this.render, this);
this.model.bind("guessCheckedEvent", this.nextQuestion, this);
this.model.bind("nextQuestionReady", this.render, this);
},
events: {
'click #answer': 'checkAnswer'
},
nextQuestion: function(){
this.model.nextQuestion();
},
checkAnswer: function(e){
$('#answer').attr("disabled", true);
var selected = $("input[type='radio']:checked");
var answer = selected.val();
this.model.set({guess: answer});
this.model.check();
},
compTemplates: function(){
console.log("comp Templates in question view");
_.templateSettings = {
interpolate : /\{\{=(.+?)\}\}/g,
escape : /\{\{-(.+?)\}\}/g,
evaluate: /\{\{(.+?)\}\}/g
};
var template = $('#question_template').html();
this.template = _.template(template);
},
render: function(response){
var question = response.question;
var answers = response.answers;
var link = response.link;
this.correctanswer = response.correctanswer;
$(this.el).append(this.template({ question: question, answers: answers, link: link}));
}
});