javascript - 清空 div 并追加后元素不出现

Question

我有一个 jquery 函数，它在单击事件时清空一个 div，获取一些 json，然后附加到已清除的 div。但是，我试图附加到所述 div 的复选框没有出现。这是我的代码:

$(function() {
  $("#nwCol").click(function() {
    $('#adDiv').empty();
    $.getJSON('/_adv_detect_su', function(data) {
      $(data.advanced).each(function(index, value) {
        if (value.present === 'yes') {
          $('#adDiv').append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
        } else {
          $('#adDiv').append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
        }
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
  <form id="advDet">
    <div id="adDiv"></div>
    <div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
  </form>
</div>

我在不清除 div 并使用 .after 函数时可以正常工作。然而，这并不理想。

Answer 1

如果您正在使用任何广告 block 您的 div ID，以“ad”开头，将从用户代理浏览器获取#header_ads 样式，设置为“display: none”，因此它似乎不起作用，即使它正在工作。正如您在此打印屏幕上所见 http://storage1.static.itmages.com/i/17/0616/h_1497628218_1896684_0db84ac526.png

所以我将你的 div id 更改为 anotherID 现在它正在工作

运行下面的代码段。

$(function() {
    $("#nwCol").click(function() {
      var anotherDiv = $('#anotherID');
      anotherDiv.empty();
      var data = {
        advanced: [{present: 'yes', name: 'test1'}, {present: 'no', name: 'test2'}]
      };
      $(data.advanced).each(function(index, value) {
        console.log(value);
        if (value.present === 'yes') {
          anotherDiv.append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
        } else {
          anotherDiv.append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
        }
      });
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
  <form id="advDet">
    <div id="anotherID"></div>
    <div id="saveao"> 
      <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> 
    </div>
  </form>
  
  <a href="javascript:;" id="nwCol">Test Click</a>
</div>