javascript - 即使禁用，Tablesorter 在编辑行项目时也会更改行位置

Question

我的应用程序中出现了一个奇怪的错误，希望有人知道解决方案。

我的问题:我有一个包含不同行的电影表，我使用 Mottie 的 jquery tablesorter 插件对我的项目进行排序并过滤它们。每行还有它自己的编辑按钮，当你点击它时，td就可以编辑了，现在的问题是，当我编辑电影标题时，然后点击电影导演更改他的名字，整行都会跳转向下，并且一直这样做，直到该行位于底部。当我删除 tablesorter 功能时，一切正常，但是当它处于事件状态时，它会出现这个奇怪的错误。现在我尝试在单击时禁用表排序器(遵循此 solution )，但这也对我没有帮助。排序和过滤器被禁用，但它仍然将我的整行推低。这是一个可视化问题的 gif:

注意:电影标题、日期、导演和运行时间都是

和 <input> 标签，单击编辑按钮时，

标签将隐藏，并且 <input>变得可见。我使用这种方法是因为我需要以某种方式将新数据提供给我的 django 模型，也许这就是问题的一部分。

此外，我还有一个隐藏行，当我单击“描述”时会显示该行，不知道这是否也很重要。

我想提供一个jsfiddle，但我没能在jsfiddle中重现这个错误，它只出现在我的应用程序中:/

这是应用程序的重要代码:

HTML

<table id="movieTable" class="table-hover tablesorter">
<thead class="table-head">
          <tr>
               <th data-sorter="false"></th>
               <th>TITLE</th>
               <th class="gen">GENRE</th>
               <th>RELEASE DATE</th>
               <th>DIRECTOR</th>
               <th>DESCRIPTION</th>
               <th>RUNTIME</th>
               <th>STATUS</th>
               <th>IMDB</th>
               <th data-sorter="false" id="buttons-head-bottom"></th>
          </tr>
</thead>
<tbody>
<td>
    <a href=“/myapp/evil-dead/">
        <input class="input-title hide" value="Evil Dead" form="movie1" name="title"/> <!— hidden on default —>
        <p class="movie-title">Evil Dead</p>
    </a>
</td>
<td>
    <select class="hide input-genre-select" form="movie1" name="genre"> <!— hidden on default —>
    <!— options code —>
    </select>
    <p class="movie-genre">Horror</p>
</td>
<td>
    <input class="hide input-release" value="25.04.2013" form="movie1" name="date" size="10"/> <!— hidden on default —>
    <p class="movie-release">25.04.2013</p>
</td>
<td>
    <input class="hide input-director" value="Fede Alvarez" form="movie1" name="director"/> <!— hidden on default —>
    <p class="movie-director">Fede Alvarez</p>
</td>
<td class="desc-pointer toggle" data-toggle="collapse" data-target=".description1"> <!— collapse and shows a hidden table row when clicked —>
    Description <i class="fa fa-caret-right"></i>
</td>
<td>
    <input class="hide input-runtime" value="91" form="movie1" name="runtime" maxlength="4" size="4"/> <!— hidden on default —>
    <p class="movie-runtime">91 min</p>
</td>
<td>
    <select class="hide input-status-select" form="movie1" name="status"> <!— hidden on default —>
    <!— options code —>
    </select>
    <p class="movie-status">Bought and watched</p>
</td>
<td>6,5</td>
<td>
    <!— edit button, is hidden when clicked on it —>
    <button type="button" class="edit-btn">
        <i class="fa fa-pencil-square"></i>
    </button>
    <!— hidden on default, shows up when clicked on edit-btn —>
    <button type="submit" form="movie1" class="save-btn">
        <i class="save-btn fa fa-save"></i>
    </button>
    <!-- delete button -->
    <button id="del-btn1" type="button" class="delete-btn btn btn-default" data-toggle="modal" data-target="#deleteModal1">
        <i class="fa fa-remove"></i>
    </button>
</td>
</tbody>
</table>

我在这里只提供了一个表行，但其他每一行的构建都是相同的。

Javascript

// table sorter

$(function(){
    const $table = $("#movieTable").tablesorter({
        dateFormat: "ddmmyyyy",
        headers: {
            2: { sorter: "select" },
            3: { sorter: "shortDate" },
            7: { sorter: "select" },
        },
        widgets: ["filter"],
        widgetOptions : {
            filter_columnFilters: false,
        }
    });

    $.tablesorter.filter.bindSearch( $table, $('.search') );

});

 // edit button

$(".edit-btn").click(function() {

    $('table')
    .unbind('appendCache applyWidgetId applyWidgets sorton update updateCell')
    .removeClass('tablesorter')
    .find('thead th')
    .unbind('click mousedown')
    .removeClass('header headerSortDown headerSortUp');

    const parent = $(this).parent().parent()
    parent.find(".input-director, .input-runtime, .input-release, .input-title").addClass("highlight");
    parent.find(".movie-title, .movie-genre, .movie-release, .movie-director, .movie-runtime, .movie-status").addClass("hide");
    parent.find(".input-title, .input-genre-select, .input-release, .input-director, .input-runtime, .input-status-select").removeClass("hide");
    parent.find(".edit-btn").hide();
    parent.find(".save-btn").show();

    $(".gen").addClass("genre-padding");
    $(".title-link").bind("click", function(e) {
        e.preventDefault();
    })
})

如果需要，我可以提供更多代码，但我希望这足以让有人找到此错误的解决方案。就像我之前说的，我找到的唯一解决方案是删除 tablesorter 插件，禁用它没有帮助。

感谢所有努力的人!

Answer 1

这不是一个错误，而是一个功能! :D

插件内部设置为在触发更新时自动重新启动；不过，我没有看到它在共享的代码中使用。要绕过此“功能”，请设置 resort option为假。