jQuery:解除绑定dblclick，然后再次绑定

Question

我有一个包含不同数据库查询结果的表。每个td都有一个id和一个onDblClick属性，如下所示：

<td id="Vorname_2036" onDblClick="makeForm(this.id)">
    Mark
</td>

不要介意函数的名称，它并不是一个真正的表单。相反，它将td的内部HTML更改为可编辑的文本输入，并且onChange向脚本发送AJAX请求，该脚本使用更改后的文本输入的值更新数据库。所有这些都像它应该的那样工作。唯一的问题是:在第一次双击之后，我想禁用dblclick，这样用户就不会双击文本输入。我也做到了这一点。但是在完成所有操作之后，我想恢复onDblClick属性。这就是我被卡住的地方。

下面是代码(被注释掉的部分是明显错误的部分)：

function makeForm(id){
    $("#"+id).prop('ondblclick', "");
    sHtml=$("#"+id).html();
    $("#"+id).html("<input type=\"text\" id=\"t_"+id+"\" value=\""+sHtml+"\">");
    $("#"+id).change(function(){
        var content = $("#t_"+id).val();
        $("#"+id).html("<img src=\"icons/spinner.gif\" align=\"right\" width=\"20\" height=\"20\">");
        $.get("includes/query_update.php",{
            id:id,
            content:content
        },
        function(data){
            $("#"+id).html(data);
/*
            $("#"+id).dblclick(
                function(){
                    makeForm(this.id);
                }
            );
*/
        });
    });
}

提前感谢！

马丁

Answer 1

你有没有试过改变解绑方法？因为当您重新绑定事件时，注释中描述的事件看起来仍然是绑定的(基本上，每次单击按钮时，都会将函数绑定到相同的事件)。在JQuery中，如果你多次绑定一个事件，它也会被多次执行。我的感觉是你解绑它的方式是不正确的。您现在这样做是在删除DOM (实际的超文本标记语言)上的属性OnDblClick的值，而我猜您是通过JQuery方法$('#id').dblClick(function() {})绑定了even。当以JQuery方式绑定时，不会在DOM中添加任何内容(所有内容都保存在内存中的JQuery代码中)，这使得您实际上什么也不做。您应该尝试像这样解绑事件，而不是像以前那样解绑事件：

$("#"+id).off("dblclick");

这就是JQuery的方式。

Answer 2

好了，这是我自己想出来的。但我承认，这只是一种猜测，我不完全理解它为什么会起作用，可能它是大错特错的。但它允许我随时更新表单元格中的数据，而不会陷入循环。它来了：

function makeForm(id){
    $("#"+id).prop('ondblclick', ""); // In the first round this disables the doubleclick event added through HTML (I think)
    $("#"+id).off("dblclick"); // In the second round this disables the doubleclick event added through jQuery (I think)
    sHtml=$("#"+id).html();
    $("#"+id).html("<input type=\"text\" id=\"t_"+id+"\" value=\""+sHtml+"\">");
    $("#"+id).change(function(){
        var content = $("#t_"+id).val();
        $("#"+id).html("<img src=\"icons/spinner.gif\" align=\"right\" width=\"20\" height=\"20\">");
        $.get("includes/query_update.php",{
            id:id,
            content:content
        },
        function(data){
            $("#"+id).html(data);
            $("#"+id).off("dblclick"); // This is beyond me. Why once more? Why here?
            $("#"+id).dblclick(
                function(){
                    makeForm(this.id);
                }
            );
        });
    });
}

如果有人能改进这一点，并向我解释到底发生了什么，我将不胜感激。

Answer 3

$(选择器).unbind(‘dblclick’)