以下の question_template を使用して質問を div に追加するバックボーン クイズ アプリを作成しています。最初の質問に回答すると、2 番目の質問が追加され、最初の質問が下にプッシュされます。3 番目の質問に到達すると、html ラジオ ボタンが壊れます。3 番目の質問の一番上のボタン (赤色の回答) を選択できません。ただし、4 番目の質問が読み込まれ、3 番目の質問がプッシュ ダウンされると、3 番目の質問の赤いボタンを選択できます (ただし、質問に回答した後に送信が無効になるため、送信できなくなります)。4 番目の質問では、上の 2 つのラジオ ボタンのいずれも選択できません。私はすべてのブラウザで同じ問題を抱えています。3問目と4問目が読み込まれた画面の画像を掲載しました。あるか気になる」
更新:すべてを読む前に、ラジオ ボタンの問題は、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の好きな色は？」という質問に対して、「赤」ボタンを押すまで選択できません。一番上の質問については、上の 2 つのボタン「ピンク」または「パープル」のいずれかを選択できません。現在、データベースには 4 つの質問しかありません。
更新 これは、質問「M の好きな色は何ですか」の「赤」ラジオ ボタン (選択できないもの) の CSS スタイルです。別のラジオボタンを調べても、スタイルは同じです。
「Mさんの好きな色は？」という質問のhtmlを更新
$('this.el').append... を使用すると、render 関数でQuestionView Update が更新され、結果のラジオ ボタンが機能します。しかし、私はやりたかった$('this.el').prependので、新しい質問が一番上に追加されました。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}));
}
});