jQuery：解除绑定后如何返回鼠标事件？答案

【问题标题】：jQuery: How to return mouse-events after unbind?jQuery：解除绑定后如何返回鼠标事件？
【发布时间】：2012-01-20 23:59:22
【问题描述】：

我需要在鼠标进入 TD 元素时显示文本输入并在它离开时隐藏。因此，当我们单击此输入（焦点）时，它会取消绑定鼠标事件.......当我们在输入中按 Enter 时，我应该写什么来将标准动作绑定到 mouseenter 和 mouseleave？

$(".translation").mouseenter(function(){
            $(this).html('<input type="text" class="tr_input" placeholder="Перевести...">');


            $(".tr_input").focus(function(){
                $(".translation").unbind("mouseenter");
                $(".translation").unbind("mouseleave");
            });

        });

        $(".translation").mouseleave(function(){
            $(this).html("");
        });

【问题讨论】：

标签： jquery focus unbind mouseenter mouseleave

【解决方案1】：

我认为您可以使用display:none 创建一次（可能直接在您的 HTML 中），而不是每次都重新创建输入。当鼠标进入您的td 时，隐藏那里的所有内容并显示您的输入。

然后，当鼠标离开您的输入时，您再次隐藏它并显示之前的内容（如果有的话）。这样您就不需要动态绑定和取消绑定元素。

更新：我想我误解了你的问题。也许其他人知道如何正确绑定和取消绑定事件处理程序（我不知道），但也许我可以帮助您解决问题。如果我理解正确，您正在尝试执行类似于编辑表格内容的操作，对吧？（如电子表格）

所以，我上面的建议仍然适用，但是您希望阻止这些处理程序在用户单击输入后运行。由于一次只有一个元素具有焦点，因此您可以创建一个 lock 变量并在用户编辑它时将其设置为 true：

var lock = false;
$("input").click(function() { lock = true; });

并在运行每个处理程序之前对其进行测试：

$(".translation").mouseenter(function(){
    if ( lock )
        return;

当用户按下回车（或输入失去焦点）时，您可以再次设置lock = false 并运行与mouseleave 相同的代码（因为在用户编辑时鼠标可能已经离开）。

jsFiddle 上的完整工作示例。希望对您有所帮助！

【讨论】：