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

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. 如果我多次点击同一行，它会继续多次触发该事件；如果我单击不同的行，所有行都会同时进入编辑模式。

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

你能给我一些建议吗？

Answer 1

您可以使用 one 而不是 click

$('.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。

Answer 2

试试这个

$(".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);
    });
}