【发布时间】：2026-02-14 23:20:03
【问题描述】：
我的应用程序出现了一个奇怪的错误，希望有人知道解决方案。
我的问题：我有一个包含不同行的电影表，我使用 Mottie 的 jquery tablesorter 插件对我的项目进行排序并过滤它们。每行也有它自己的编辑按钮，当你点击它时，td 可以编辑，现在的问题是当我编辑时让我们说电影标题，然后点击电影导演更改他的名字，整行跳转向下，它一直这样做，直到该行位于底部。当我删除 tablesorter 功能时，一切正常，但是当它处于活动状态时，它会出现这个奇怪的错误。现在我尝试在点击时禁用表格排序器（在此solution 之后），但这也对我没有帮助。排序和过滤器被禁用，但它仍然把我的整行推倒了。这是一个可视化问题的 gif：
注意：电影标题、日期、导演和运行时间都是
和标签，点击编辑按钮
标签被隐藏，变得可见。我使用这种方法是因为我需要以某种方式将我的新数据提供给我的 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 插件，禁用它并没有帮助。
感谢所有努力的人！
【问题讨论】：
标签： javascript jquery html tablesorter