Question

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

以下代码位于包含的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()工作。

你能给我一些建议吗？

Answer 1

您可以使用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执行$x.removeData('editing')。

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);
    });
}

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

2 个答案: