Question

我有一些带有动态扩展菜单的代码。从我的Python Django视图中，我传递了一个JSON数组，以将复选框的状态设置为checked。有一个隐藏的div会加载复选框，但是只有在使用警报时，我才能更改状态。

下面的代码和其中一个div的HTML如下：

for (var key in interestsselected) {
  genres = interestsselected[key];
  //Tick interest
  $("#id_interest_" + key).prop("checked", true);
  getSubinterests(key); //Gets the sub menu
  $("#interest-" + key).show(); //Hiding or showing makes no difference
  //alert($("#interest-"+key)); //Will work if this line is uncommented
  for (i = 0; i < genres.length; i++) {
    $("#" + key + "-" + genres[i]).prop("checked", true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="offset-sm-1 subinterests" id="interest-5" style="">
  <label class="interest"><input type="checkbox" class="subinterest 5" id="5-FA" name="genre[]" value="5-FA">Factual</label><br>
  <label class="interest"><input type="checkbox" class="subinterest 5" id="5-SF" name="genre[]" value="5-SF">Science Fiction</label><br>
  <label class="interest"><input type="checkbox" class="subinterest 5" id="5-TH" name="genre[]" value="5-TH">Thriller</label><br>
  <label class="interest"><input type="checkbox" class="subinterest 5" id="5-SU" name="genre[]" value="5-SU">Superhero</label><br>
  <label class="interest"><input type="checkbox" class="subinterest 5" id="5-F" name="genre[]" value="5-F">Fantasy</label><br>
  <label class="interest"><input type="checkbox" class="subinterest 5" id="5-H" name="genre[]" value="5-H">Horror</label><br>
</div>

上面的代码已经包含在$（document）.ready中。我试过用另一个$（document）.ready包裹内部for循环，但这不起作用。我尝试将内部for循环添加为功能getSubinterests的一部分，并将流派数组传递给它，但这是同一回事。

我尝试将for循环包含在“ $（”＃interest-“ + key）.ready”中，但还是一样，我尝试了“ $（”＃interest-“ + key）.load”，但是得到一个错误，所以尝试了“ $（”＃interest-“ + key）.ready（” load“，function”，同样的问题。我已经用“ $（”＃“ + key +”-“ +” genres再次尝试了所有这些[i]）”，但还是一样。

下面的代码是getSubinterests函数：

  function getSubinterests(interestid) {
$.ajax({
  type: "POST",
  url: "/user/getsubinterests/",
  data: { csrfmiddlewaretoken:'{{ csrf_token }}',
          interestid: interestid },
  success: function(data) {
    //console.log(data);
    var interesttext = "";

    for (var key in data) {
      //Add returned data under the interest
      interesttext = interesttext + "<label class='interest'><input type='checkbox' class='subinterest "+interestid+"' id='"+interestid+"-"+key+"' name='genre[]' value='"+interestid+"-"+key+"' >"+data[key]+"</label><br>";
      //alert(data[key]);
    }
    $("#interest-"+interestid).html(interesttext);
    //Capture clicks on the checkboxes that have been added
    $(".subinterest").click(function() {
      id = $(this).attr('id').split("-")[0];
      if(!($("#id_interest_"+id).prop("checked"))) {
        $("#id_interest_"+id).prop("checked",true);
      }
    });
  }
});

}

解决方案：

  function getSubinterests(interestid) {
    $.ajax({
      type: "POST",
      url: "/user/getsubinterests/",
      data: { csrfmiddlewaretoken:'{{ csrf_token }}',
              interestid: interestid },
      success: function(data) {
        //console.log(data);
        var interesttext = "";
        var genres = [];

        if(interestsselected[interestid]) {
          genres = interestsselected[interestid];
        }

        for (var key in data) {
          //Add returned data under the interest
          if (genres.includes(key)) {
            //Check the box
            interesttext = interesttext + "<label class='interest'><input type='checkbox' class='subinterest "+interestid+"' id='"+interestid+"-"+key+"' name='genre[]' value='"+interestid+"-"+key+"' checked>"+data[key]+"</label><br>";
          } else {
            interesttext = interesttext + "<label class='interest'><input type='checkbox' class='subinterest "+
                          interestid+"' id='"+interestid+"-"+key+"' name='genre[]' value='"+interestid+"-"+key+"' >"+data[key]+"</label><br>";
          }
        }
        $("#interest-"+interestid).html(interesttext);
  }

我了解了异步问题，并采取了另一种方法，即通过读取包含JSON的全局变量，在AJAX调用成功后呈现HTML。

无法将复选框设置为已选中-与DOM加载有关，

0 个答案: