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元素。由于您在tr之外tbody，HTML呈现器在其周围添加了第二个tbody - 如果您在DOM检查器中检查原始代码段，则可以看到这一点。因此，当您附加到tbody时，内容在两个元素之间都是重复的。

如果您修复HTML，问题就会消失：

＆＃13;

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'));
  });
})

＆＃13;

<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>

＆＃13;

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

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

1 个答案: