停止排序和重新使用JavaScript TR

trojen_dev：

我想停下来整理和复位点击模态取消按钮后使用Javascript的TR。但是，当我运行下面的代码，我得到一个错误，

未捕获的错误：无法调用排序之前的初始化上的方法; 试图调用方法“取消”

莫代尔：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
 labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button>
      </div>
  <div class="modal-body">
    Do you really want to update the order?
  </div>
  <div class="modal-footer">
    <button id="cancel_update_order" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button id="update_order" type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

脚本：

new Tablesort(document.getElementById('table'));

var fixHelperModified = function(e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
  });
  return $helper;
  }


  updateIndex = function(e, ui) {
    $('#exampleModal').modal({
      backdrop: 'static',
      keyboard: false
    })

    $('#update_order').on('click', function() {
      $('td.index', ui.item.parent()).each(function (i) {
          $(this).html(i + 1);
      });
      $('#exampleModal').modal('hide');
    });

    $('#cancel_update_order').on('click', function() {
      $(this).sortable('cancel');
    });

  };

$("#table tbody").sortable({
  helper: fixHelperModified,
  stop: updateIndex
}).disableSelection();

freedomn-M：

当你收到此错误：

未捕获的错误：无法调用排序之前的初始化上的方法; 试图调用方法“取消”

这很可能意味着你打电话“取消”一上不同的比一个排序被初始化的元素。

在这种情况下，你有这样的代码：

$('#cancel_update_order').on('click', function() { 
    $(this).sortable('cancel'); 
});

该代码中“这”是指cancel_update_order，按钮，而不是表。

如果你只有一个排序（使用外法updateIndex那么这很快被引用到了排序初始化表定：

$('#cancel_update_order').on('click', function() { 
    $("#table tbody").sortable('cancel'); 
});

如果你想这是更多的可重复使用的，那么你就需要不断的副本“这个”，当它被称为表：

updateIndex = function(e, ui) {

    var sortableElement = this;

    $('#cancel_update_order').on('click', function() {
      $(sortableElement).sortable('cancel');
    });

  };

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。