拖放后无法访问元素

Question

我制作了一个可拖放的表格，用于对产品进行分类。

我的桌子是这样的：

<table class="table table-sortable" id="mytab">

    <tbody>

    [{foreach from=$mylist item=listitem}]
    [{assign var="_cnt1" value=$_cnt1+1}]

        <tr draggable="true" id="test_variant.[{$_cnt1}]">
            <td class="idcount">[{$_cnt1}]</td>
            <td class="[{$listclass}]">Productname</td>
            <input id="sortcount[{$_cnt1}]" class="sortcount" type="hidden" value="[{$_cnt1}]"/>
        </tr>

    [{/foreach}]
    </tbody>
</table>

我的 jQuery 看起来像这样：

$(function() {
        $('.table-sortable tbody').sortable({
            handle: 'span'
        });

    $('.table-sortable tbody').sortable().bind('sortupdate', function(e, ui) {
        function updateTable(){
        var table = document.getElementById("mytab");
            for (var i = 0, row; row = table.rows[i]; i++) {
                $( row ).attr("id","test_variant."+i);
                $( row ).find(".idcount").text(i);  
                $( row ).find(".sortcount").val(i+10);
            }
        }
        setTimeout(updateTable, 100);
    });
});

问题是，在我拖放我的项目后，dom 或其他东西不再存在。

就像我的系统不会保存拖放的条目（但其他已更新但未拖动的条目）。

是什么导致我来到这里，因为我不明白是当我拖动一个项目并尝试像这样访问它时

document.getElementById("sortcount1").value = "200";

它只是说

Uncaught TypeError: Cannot set property 'value' of null like it's not existing

我没有问题访问其他项目。

当我通过单击 chrome devtools 中的元素打开 dom 时，然后返回控制台并再次尝试它再次工作，就像它需要初始化或其他东西一样。

希望有人能给我一个提示。

谢谢！

Answer 1

您可以考虑以下示例。

$(function() {
  function updateTable(e, ui) {
    var t = $(e.target).closest("table");
    $("tbody tr", t).each(function(i, el) {
      $(el).attr("id", "test_variant." + i);
      $(".idcount", el).html(i);
      $(".sortcount", el).val(i + 10);
    });
  }

  $('.table-sortable tbody').sortable({
    handle: 'span',
    update: updateTable
  });
});

这将在排序更新后重置表中的项目。

更新

$(function() {
  function updateTable(e, ui) {
    var t = $(e.target).closest("table");
    $("tbody tr", t).each(function(i, el) {
      var c = i + 1;
      $(el).attr("id", "test_variant." + c);
      $(".idcount", el).html(c);
      $(".sortcount", el).val(c + 10);
    });
  }

  $('.table-sortable tbody').sortable({
    handle: 'span',
    items: "> tr",
    update: updateTable
  });
});

table {
  width: 340px;
}

table tr {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<table class="table-sortable">
  <thead>
    <tr>
      <td>&nbsp;</td>
      <td>ID</td>
      <td>Product Name</td>
    </tr>
  </thead>
  <tbody>
    <tr id="test_variant.1">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">1</td>
      <td class="products">Item Name 1
        <input id="sortcount-1" class="sortcount" type="hidden" value="11" />
      </td>
    </tr>
    <tr id="test_variant.2">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">2</td>
      <td class="products">Item Name 2
        <input id="sortcount-2" class="sortcount" type="hidden" value="12" />
      </td>
    </tr>
    <tr id="test_variant.3">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">3</td>
      <td class="products">Item Name 3
        <input id="sortcount-3" class="sortcount" type="hidden" value="13" />
      </td>
    </tr>
    <tr id="test_variant.4">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">4</td>
      <td class="products">Item Name 4
        <input id="sortcount-4" class="sortcount" type="hidden" value="14" />
      </td>
    </tr>
    <tr id="test_variant.5">
      <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
      <td class="idcount">5</td>
      <td class="products">Item Name 5
        <input id="sortcount-5" class="sortcount" type="hidden" value="15" />
      </td>
    </tr>
  </tbody>
</table>

测试了代码，它似乎可以正常工作。