jquery - 多次点击事件，但每次点击后解​​除绑定(bind)

Question

我想要做什么:每次我单击表格行时，它都会进入编辑模式。当我单击另一行时，我之前单击的行退出编辑模式，而我刚刚单击的行进入编辑模式。

以下代码位于包含的 JavaScript 文件中。我有一个使表格行可编辑的函数。

function editRow(row) {
    /* awesome code here */
}

并准备好事件...

$(".editable_title").click(function() {
    editRow(this.parentNode);
});`

我尝试过:

1. 将代码放在 $(document).ready(function() { }); 之间，但它仅适用于第一次点击和第一次编辑提交。但是，如果我再次尝试这样做，那就行不通了。

2. 只需将代码本身放入包含的文件中，无需使用 $(document).ready(function(){ });。然后在 tr 上使用 onclick 事件。问题:

   1. JavaScript 是侵入性的。
   2. 如果我多次点击同一行，它会继续多次触发该事件；如果我单击不同的行，所有行都会同时进入编辑模式。

我知道这只是拥有一个常量事件监听器并使用取消绑定(bind)的问题。我尝试使用 .live() ，效果很好，但后来我无法让 .die() 工作。

您能给我一些建议吗？

Answer 1

您可以使用one而不是点击:

$('.editable_title').one('click', function() { editRow(this.parentNode); });

然后在完成编辑后，仅在您编辑的行的 .editable_title 上再次使用 one。

或者你可以使用一个标志:

$('.editable_title').click(function() {
    var $p = $(this).parent();
    if($p.data('editing'))
        return;
    $p.data('editing', true);
    editRow($p[0]);
});

然后执行 $x.removeData('editing') ，完成编辑后，获取相应的 $x。