footable에 enter를 클릭하면 숨겨진 세부 정보 표시

Question

footable에 간단한 기능을 적용하려고합니다. 난 당신이 행을 통해 탭 수 footable 있습니다. 각 행에서 현재 선택한 행에 대한 숨겨진 내용/세부 정보를 확장하려면 입력을 클릭 할 수 있기를 원하지만 클릭 기능을 찾고 키 누르기 입력을 추가하는 데 문제가 있습니다.

이 현재 내가 추가 한 일부 JQuery와,하지만 HTML 자바 스크립트에서 렌더링되기 때문에이 내가 마우스로 행을 클릭하기 전에 숨겨진 내용이 렌더링되지 않는다는 것을 의미 단순히 작동하지 않습니다

$("tbody").delegate("*", "focus blur", function() { 
    var elem = $(this); 
    setTimeout(function() { 
     elem.toggleClass("focused", elem.is(":focus")); 
    }, 0); 
}); 

$('.footable > tbody > tr').keypress(function (e) { 

    if ($(this).hasClass("focused") && e.which == '13') { 
     //alert('test'); 
     $('.footable-row-detail').css({ "display": "table-row" }); 
    } 

}); 

Answer 1

문제가 무엇인지 알게되었습니다.

$table.find(opt.toggleSelector).unbind('keypress').keypress(function (e) { 
      if ($(this).hasClass('focused') && e.which == 13) { 
       //alert('You pressed enter!'); 
       $(this).trigger(trg.toggleRow); 
      } 
     }); 

Answer 2

첫 번째 예에 따라 경찰, 너무 keypress 이벤트에 대한 위임 된 이벤트 핸들러를 사용

$('.footable > tbody').on('keypress', '> tr', function (e) { 
    if ($(this).hasClass("focused") && e.which == '13') { 
     //alert('test'); 
     $('.footable-row-detail').css({ "display": "table-row" }); 
    } 
}); 

너무 오래 .footable 테이블 요소가 항상 존재하는 한,이 이벤트 핸들러 최대 이벤트 거품. 그런 다음 '> tr' 선택자가 버블 체인의 요소에 적용됩니다. 이는 행이 이벤트 시간에만 일치해야 함을 의미합니다.

footable 테이블 자체가 동적 인 경우 조상을 더 영구적 인 것으로 이동하십시오. 아무것도 가까이하지 않는 경우 document 기본입니다/편리 (이 스타일에 의한 버그가로 위임 된 이벤트에 대한 body를 사용하지 않습니다) :

$(document).on('keypress', '.footable > tbody > tr', function (e) { 
    if ($(this).hasClass("focused") && e.which == '13') { 
     //alert('test'); 
     $('.footable-row-detail').css({ "display": "table-row" }); 
    } 
});