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

【问题标题】：Click event more than once, but unbind after each click多次点击事件，但每次点击后解除绑定
【发布时间】：2017-12-31 06:23:17
【问题描述】：

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

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

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

并准备好活动...

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

我尝试过的：

将代码放在$(document).ready(function() { }); 之间，但它只适用于第一次点击和第一次编辑提交。但是，如果我再次尝试这样做，它就不起作用了。
只需将代码本身放入包含的文件中，不带$(document).ready(function(){ });。然后在 tr 上使用 onclick 事件。问题：
1. JavaScript 具有侵入性。
2. 如果我多次点击同一行，它会继续多次触发事件；如果我点击不同的行，它们都会同时进入编辑模式。

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

你能给我一些建议吗？

【问题讨论】：

看看这个。这就是你要找的。 stackoverflow.com/questions/6752025/…
感谢@ShankarSangoli，但我尝试了.one，但是在我提交更新按钮之后呢？我不能让更多行进入编辑状态。
您可以再次调用one 并附加处理程序。
我该怎么做？你的意思是我尝试通过再次单击该行再次调用它？它只工作一次。
你有没有想过添加一个退出编辑模式的函数，这在$(".editable_title").click()上被称为第一件事。

标签： jquery rows

【解决方案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 执行$x.removeData('editing')。

【讨论】：

谢谢@mu，但我怎样才能多次使用.one？
@leonel：完成编辑后，您必须再次调用它（但只针对您感兴趣的单个 .editable_title）。
如何再调用它？我不明白。我可能可以在链接上做一个onclick() 事件，但这将是突兀的javascript。或者你认为这是要走的路？
@leonel：您只需在适当的x 上调用$(x).one('click', function() { editRow(this.parentNode); });，可能是$(e).closest('tr').find('.editable_title').one(...，其中e 是传递给editRow 的东西。
我会选择标志解决方案。

【解决方案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);
    });
}

【讨论】：