多次单击事件，但每次单击后解除绑定

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事件。问题： JavaScript是侵入性的。 如果我多次点击同一行，它会多次触发事件;如果我点击不同的行，它们都会同时进入编辑模式。

我知道这只是一个持续事件监听器和使用unbind的问题。我尝试使用.live()运行良好，但后来我无法让.die()工作。

你能给我一些建议吗？

Answer 1

试试这个

$(".editable_title").one(function() {
    editRow(this);
});

function editRow(row) {
    var rowNode = row.parentNode;
    /* awesome code here */


    //Attach the click event here again after editing is done
    //If you are doing any ajax calls then this should be done in the success callback
    $(row).one(function() {
       editRow(this);
    });
}

Answer 2

您可以使用one而不是click：

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

然后在one上再次使用.editable_title作为编辑时编辑的行。

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

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

当你完成编辑时，为适当的$x.removeData('editing')做一个$x。