1

当鼠标进入 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("");
        });
4

1 回答 1

0

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

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

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

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

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

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

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

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

jsFiddle上的完整工作示例。希望能帮助到你！

于 2012-01-21T00:11:45.720 回答