2012-01-20 3 views
1

TD要素をマウスが入力して非表示にするときにテキスト入力を表示する必要があります。だから、この入力(フォーカス)をクリックすると、マウスイベントがアンバインドされます。........入力でEnterキーを押すと、mouseenterにスタンダートアクションをバインドするために書き込むべき内容& mouseleave?jQuery:アンバインド後にマウスイベントを返す方法は?

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

答えて

0

代わりの入力を毎回再作成、私はあなたが(あなたのHTMLに多分直接)一度作成することができると思うけどdisplay:noneと。マウスがあなたのtdに入ったら、そこにあるものを隠して入力を表示します。

その後、マウスが入力を離れると、それを再び非表示にし、以前に何があったかを示します。このようにして、素早く要素をバインドまたはアンバインドする必要はありません。

更新:私はあなたの質問を誤解したと思います。たぶん、他の人がイベントハンドラを正しくバインドしたりアンバインドする方法を知っているかもしれませんが、私はあなたの問題を解決するのに役立つかもしれません。私が正しく理解していれば、あなたはテーブルの内容を編集するのと同様のことをしようとしているのですよね? (スプレッドシートのような)

上記の私の提案はまだ適用されますが、ユーザが入力をクリックした後にこれらのハンドラが実行されないようにしたいとします。一つだけの要素が一度にフォーカスを持っていますので、ユーザーがそれを編集している間、あなたはlock変数を作成し、trueに設定できます。そのため

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

とテストをあなたのハンドラのそれぞれを実行する前に:

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

ユーザがEnterを押すか、入力がフォーカスを失ったときにmouseleaveと同じコードを実行して、lock = falseと同じコードを実行することができます。

jsFiddleでの完全な使用例。それが役に立てば幸い!

関連する問題