2012-01-20 4 views
1

마우스가 TD 요소를 엔트로이드로 입력하고 숨길 때 텍스트 입력을 표시해야합니다. 그래서이 입력 (포커스)을 클릭하면 마우스 이벤트가 바인딩 해제됩니다 ........ 입력에서 Enter 키를 누를 때 마우스 포인터에 표준 액션을 바인딩하기 위해 작성해야하는 것은 무엇입니까? & 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

, 난 당신이 있지만 display:none와 (당신의 HTML에서 아마 직접) 번을 만들 수 있다고 생각. 마우스가 td에 들어가면 숨기고 입력을 보여주십시오.

그런 다음 마우스가 입력을 떠나면 다시 숨기고 이전에 있었던 것을 표시합니다 (있는 경우). 이렇게하면 즉시 요소를 바인딩하거나 바인딩 해제 할 필요가 없습니다.

업데이트 : 귀하의 질문에 대한 오해가 있다고 생각합니다. 어쩌면 다른 사람이 이벤트 처리기를 제대로 바인딩하고 바인딩 해제하는 방법을 알고있을 수도 있지만 (아마도 그렇지 않습니다) 어쩌면 내가 문제를 해결할 수 있도록 도울 수 있습니다. 내가 올바르게 이해했다면 테이블의 내용을 편집하는 것과 비슷한 일을하려고합니다. 맞습니까? (스프레드 시트처럼)

위의 제안 사항은 여전히 ​​적용되지만 사용자가 입력을 클릭하면 해당 핸들러가 실행되지 않도록하고 싶습니다. 하나의 요소는 한 번에 초점을 것이기 때문에 사용자가 편집하는 동안, 당신은 lock 변수를 생성하고 true로 설정할 수 있습니다 : 그것은에 대한

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

그리고 테스트를하여 각 핸들러를 실행하기 전에 :

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

사용자가 Enter 키를 누르거나 입력에 포커스가 없으면 사용자가 편집하는 동안 마우스가 이미 남아있을 수 있으므로 mouseleave과 동일한 코드를 다시 실행하여 lock = false을 설정할 수 있습니다.

전체 작업 예제는 jsFiddle입니다. 희망이 도움이됩니다!