Question

I’m need to show text-input, when mouse enteres the TD element and hide, when it leaves. So, when we click into this input (focus), it unbinds the mouse-events…….what i should write to bind the standart actions to the mouseenter & mouseleave, when we press Enter in the input?

$(".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("");
        });

Answer 1

Instead of recreating the input every time, I think you could create it once (maybe directly in your HTML) but with display:none. When the mouse enters your td, hide whatever’s there and show your input.

Then, when the mouse leaves your input you hide it again and show what was there before (if anything). This way you won’t need to bind and unbind elements on the fly.

Update: I think I misunderstood your question. Maybe someone else knows how to properly bind and unbind event handlers (I don’t), but maybe I can help you solve your problem. If I understood correctly, you’re trying to do something similar to editing the contents of a table, right? (like a spreadsheet)

So, my suggestion above still applies, however you want to prevent those handlers from running after the user clicked on the input. Since only one element will have focus at a time, you could create a lock variable and set it to true while the user is editing it:

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

And test for it before running each of your handlers:

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

When the user presses enter (or the input loses focus), you can set lock = false again and run the same code you would for the mouseleave (because the mouse might already have left while the user were editing).

Full working example at jsFiddle. Hope it helps!