0
私はJSONデータを使用していて、QuestionとMCQを表すHTMLデータを作成しています。これはHTMLでデータを読み込むことができましたが、今は配列内のユーザーの応答をキャプチャしたいと思います。ボタンユーザーが[送信]ボタンを押した後にチェックしました。jQuey.append（）メソッドを通じて読み込まれたHTMLデータにJavaScript関数を使用するにはどうすればよいですか？
var obj = JSON.parse(
'{"single": [{"id": 1,"question": "this is a question1?","option": ["option1","option2","option3","option4"]},{"id": 2,"question": "this is a question2?","option": ["option1","option2","option3","option4"]},{"id": 3,"question": "this is a question3?","option": ["option1","option2","option3","option4"]},{"id": 4,"question": "this is a question4?","option": ["optionu1","optionu2","optionu3","optionu4"]}],"multiple": [{"id": 1,"question": "this is a multiple question1?","option": ["optionm1","option2lj","option3","option4"]},{"id": 2,"question": "this is a multiple question2?","option": ["optionm1","option2j","option3","option4"]},{"id": 3,"question": "this is a multiple question3?","option": ["optionm1","option2gg","option3","option4"]},{"id": 4,"question": "this is a multiple question4?","option": ["optionm1","option2h","option3","option4"]}],"integer": [{"id": 1,"question": "this is a int question1?"},{"id": 2,"question": "this is a int question2?"},{"id": 3,"question": "this is a int question3?"},{"id": 4,"question": "this is a int question4?"}]}'
);
var s = [0, 0]; //only single correct;
var t = []; //only multiple choice
var u = []; //only numeric type
$(document).ready(function() {
});
function my(check, sub, err) {
console.log(check + " " + sub + " " + err);
var f = 0;
if (document.getElementById("test" + check - 3).checked) {
f = 1;
s[0] = 1;
} else if (document.getElementById("test" + check - 2).checked) {
f = 1;
s[0] = 2;
} else if (document.getElementById("test" + check - 1).checked) {
f = 1;
s[0] = 3;
} else if (document.getElementById("test" + check).checked) {
f = 1;
s[0] = 4;
} else {
$("#error" + err).show();
}
if(f===1){
document.getElementById("submit" + sub).disabled = true;
$("#error"+err)
.show()
.text("Your answer has been successfully submitted.");
}
}
function read() {
var pages = obj.single;
var x = 4; //for tests and creating new ID's
var sub = 1; //for submission
var err = 1; //for errors
pages.forEach(function(page) {
var test =
"<div class='row'>" +
"<div class='col s12 m12'>" +
"<div class='card teal accent-1 hoverable' id='car'>" +
"<div class='card-content center-align'>" +
"<span class='card-title'>" +
"Question " +
page.id +
"</span>" +
"<form action='#'>" +
"<p>" +
page.question +
"</p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 3) +
"'/>" +
"<label for='test" +
(x - 3) +
"'>" +
page.option[0] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 2) +
"'/>" +
"<label for='test" +
(x - 2) +
"'>" +
page.option[1] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 1) +
"'/>" +
"<label for='test" +
(x - 1) +
"'>" +
page.option[2] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
x +
"'/>" +
"<label for='test" +
x +
"'>" +
page.option[3] +
"</label></p>" +
"</form>" +
"<h6 id='error" +
err +
"'>Please select an option</h6>" +
"</div>" +
"<div class='card-action center'>" +
"<button class='btn' onclick='my(" +
x +
"," +
sub +
"," +
err +
")' id='submit" +
sub +
"'>Submit</button>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
$(".container").append(test);
console.log(test);
x += 4;
sub++;
err++;
});
}
read();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>また、私は私のコードでmaterialize.cssを使用しています。 私の問題は、送信機能を何も働かないでクリックした後です。それは関数に入りますが、ユーザがラジオボタンをチェックしていないかどうかをチェックしません（私はjqueryメソッドが動作することを認めません）。 If私は関数を$（document）.ready（）メソッドに置きます。私の関数は動作しませんが、そこに置かれた単一のjQueryイベントは動作します。私は本当に困っています。 ありがとうございます。
？ – Barmar
これはあまりにも複雑に見えます。動的要素にイベントをバインドする方法を参照してください。https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar
.containerメソッドを追加しました。もう一度確認してください。 –