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（实际的HTML）的值，而我猜你通过JQuery方法$('#id').dblClick(function() {})绑定了偶数。绑定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

$（selector）.unbind（'dblclick'）

jQuery：unbind dblclick然后再绑定它

3 个答案: