표 안의 양식 클릭시의 조치

Question

여기에서 시작하는 것은 모든 관련 코드가 포함 된 바이올린입니다. http://jsfiddle.net/baruck/43787/ 어떤 시점에서 사용자가 여러 항목을 등록해야하는 webapp을 구축 중입니다. 큰 양식이며 양식의이 섹션은 테이블 안에 있습니다. 각 입력 태그는 td 뒤에 스팬이옵니다. 사용자가 특정 행을 편집하기 위해 클릭하면 스크립트는 스팬 (입력 값을 보유)을 숨기고 입력을 표시합니다. 사용자가 다른 행을 클릭하거나 새 행을 만들면 스크립트는 입력 값을 선택하거나 범위 텍스트를 변경하고 입력을 숨기고 범위를 표시합니다.

사용자가 일부 행을 클릭하면 먼저 '편집'클래스가 추가 된 행이 선택되고 두 번째 클릭은 입력에 포커스가 놓입니다.

테이블 안쪽을 클릭하는 동안 모두 잘됩니다. 문제는 내가 활성 행의 마지막 입력 후 입력 또는 히트 탭을 포함하는 테이블 외부를 클릭하는 경우입니다. 포커스는 다른 곳으로 이동합니다 ...

두 액션 중 하나가 발생하면 해당 행의 입력에서 값을 가져 와서 범위에서 추가/변경하고 숨김 범위를 입력하고 표시하십시오.

요약 : '편집'또는 행의 마지막 입력에 '멀리 탭'을 할 때의 클래스와 테이블의 외부를 클릭 할 때이 기능을 발사 할 필요가 ...

function deactivateRows() { 
    //Deactivate editing on the rows 
    $('table.editable tr.editing').removeClass('editing'); 
    $('table.editable').find('td').not('.delete').each(function() { 
     $(this).find('input').each(function() { 
      var inputContent = $(this).val(); 
      $(this).prop('disabled', true).addClass('hide').attr('value', inputContent); 
      $(this).parent().find('span').html(inputContent).removeClass('hide'); 
     }); 
    }); 
} 

Answer 1

나는 트릭을 생각한다 클릭 한 요소 또는 블러 이벤트의 관련 요소에서 DOM을 트래버스하고 table.editable에 충돌했는지 확인하십시오. 이 같은 것 :

var isInsideEditable = function (el) { 
    return !!el && $(el).closest('table.editable').length > 0; 
}; 

$('select, input, textarea', '.editable').on('blur', function (e) { 
    if (!isInsideEditable(e.relatedTarget)) 
     deactivateRows(); 
}); 

$(window).on('click', function (e) { 
    if (!isInsideEditable(e.target)) 
     deactivateRows(); 
    return false; 
});