javascript - 如何对通过 jQuery.append() 方法加载的 HTML 数据使用 JavaScript 函数？

Question

我正在使用 JSON 数据并使用它来创建表示问题和 MCQ 的 HTML 数据。我已经能够在 HTML 中加载数据，但现在我想在数组中捕获用户的响应。我想在用户按下提交按钮后存储用户检查了哪个单选按钮。

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 方法工作。)但是，如果我将我的函数放在 $(document).ready() 方法中，我的函数将不起作用，但放置在其中的任何单个 jQuery 事件都会起作用。我真的很困惑，请帮助我。提前致谢。

Answer 1

您遇到了运算符优先级问题。加法和减法是左结合的，所以 "test"+ check - 3 首先执行 "test"+ check 然后从中减去 3 .但是 "test4"- 3 没有意义，您不能从字符串中减去数字。您需要括号来覆盖默认值，"test"+ (check -3) 因此它首先执行减法，然后连接结果。

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>