这是什么问题,以及如何通过jQuery自己的方式来防止？

Question

我正在使用$.each- 方法实现追加操作.结果很有趣(元素的时间加倍!).我可能有一些解决方法来解决这个问题.

但是我想在这里理解真正的问题,还有一种方法可以用jQuery自己的方式解决这个问题吗？

提前致谢.

var data = ["orange", "apple"];
var temp = function() {
  var template = '<dl class="dropdown"><dt> <div class ="dropdownclass" ><span class="hida">Select</span> <span class="multiSel"></span>  </div></dt><dd><div class="mutliSelect"><ul><li><input type="checkbox" value="Control" />Control Node</li><li><input type="checkbox" value="Border" />Border Node</li</ul></div></dd></dl>';
  return $(template).clone();
}
$(document).ready(function() {
  var tr;
  var ut
  $.each(data, function(i, value) {
    tr = $('<tr />', {
      id: i + 'id'
    });
    ut = temp();
    ut.addClass('hema' + i).click(function() {
      alert($(this).prop('class'));
    });
    tr.append(ut);
    tr.appendTo('tbody'); //getting multple instance!!!
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>title</th>
  </tr>
  <tbody>

  </tbody>
</table>

Answer 1

问题仅仅是因为您的HTML无效.你tbody必须包含所有 tr元素.因为您在HTML渲染器tr外面tbody添加了第二个tbody- 如果您在DOM检查器中检查原始代码段,则可以看到这一点.因此,当您附加到tbody内容时,两个元素之间都会重复.

如果您修复HTML,问题就会消失:

var data = ["orange", "apple"];
var temp = function() {
  var template = '<dl class="dropdown"><dt><div class ="dropdownclass" ><span class="hida">Select</span> <span class="multiSel"></span>  </div></dt><dd><div class="mutliSelect"><ul><li><input type="checkbox" value="Control" />Control Node</li><li><input type="checkbox" value="Border" />Border Node</li</ul></div></dd></dl>';
  return $(template);
}

$(document).ready(function() {
  $.each(data, function(i, value) {
    var $tr = $('<tr />', {
      id: i + 'id'
    });
    var $ut = temp().addClass('hema' + i);
    $tr.append($ut).appendTo('tbody');
  })

  $('tbody').on('click', '.dropdown', function() {
    alert($(this).prop('class'));
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <!-- note tbody here -->
    <tr>
      <th>title</th>
    </tr>
  </tbody>
</table>

请注意,我对你的JS逻辑做了一些修改; clone()无论如何你都不需要创建一个新的元素,将var声明放在each循环的局部,并使用一个委托的事件处理程序,而不是将一个附加到循环中的每个元素.