我有一个表,我正在使用jQuery UI的“可排序”。在表格中,我有一行包含一个“拖动句柄”来抓取和重新排序表格,以及包含可点击项目的单元格,如下所示:
<table id="test-table">
<tbody>
<tr>
<td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
<td class="clickycell"><a href="#">Testing 1</a></td>
</tr>
<tr>
<td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
<td class="clickycell"><a href="#">Testing 2</a></td></td>
<tr>
<td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
<td class="clickycell"><a href="#">Testing 3</a></td></td>
</tr>
</tbody>
</table>
在我的代码中,我使表可排序,并使用jQuery的live()
将click事件绑定到可点击的项目,如下所示:
$(function() {
/*
Using live() because in my real code table rows are dynamically added.
However, if I use click() instead, as in the commented-out code, it works
fine, without any need to click twice.
*/
// $(".clickycell a").click(function() {
$(".clickycell a").live('click', function() {
alert("Successful click");
return false;
});
$("#test-table tbody").sortable({
handle: "td.handle", /* Use the draggy handle to move, not the whole row */
cursor: "move"
});
});
我正在使用live()
,因为行可以在实际代码中动态添加到表中。
我的问题是:如果我在排序之前点击任何可点击的项目,它们工作正常。但是,在用户拖动行以重新排序它们之后,我必须单击两次以进行单击才能注册。在第二次单击之后,可点击的项目将返回“正常”,只需单击一次,直到下次拖动行。
如果我使用click()
而不是live()
- 就像在注释掉的代码中一样 - 那么单击一下就能正常工作,但我更喜欢使用live()
,正如我所说的那样。而且我很好奇为什么它不起作用。
有a live jsFiddle example here。尝试将一行拖到另一个位置,然后单击任何“测试...”链接。至少在Firefox中,我需要点击两次才能获得“成功点击”提醒。
有任何想法吗?
不幸的是以“It is a bug”的答案结束,但我猜有时会发生这种情况。也许我会清除我的GitHub登录并将其分叉,看看我是否可以追踪它并发现修复。
当我发现你的帖子(委托也有同样的问题)时,我遇到了同样的问题“live”和sortable。要跟进观察@Stephen在项目的点击处理程序绑定实时工作之前点击拖动手柄而不必点击两次...我已成功使用此解决方法。对于黑客攻击,我觉得它不太冒犯。
$('table.demo tbody').sortable({
handle: 'td.drag',
stop: function(e,ui){
$('td.drag', ui.item).click();
}
});
我只是在拖动完成后立即发出对拖动处理程序的单击调用,现在我绑定的其他项目(在我的行中)不需要点击两次。