"활성화 된"패널에 대한 부트 스트랩 패널 CSS 클래스 변경 (클릭/집중)

Question

여러 개의 부트 스트랩 패널이있는 페이지가 있는데 "활성화 된"패널에만 panel-primary 클래스가 있도록하고 싶습니다 (강조 표시되었으므로, 어떤 의미에서). 이 경우 "활성"의 정의는 사용자가 패널 내부를 클릭하거나 키보드 나 다른 것으로 포커스를 변경 한 것입니다.

그래서, 나는이 시작 :

말썽이

function highlightActivePanel($activePanel) { 
    $('.panel-primary').toggleClass('panel-primary panel-default'); 
    $activePanel.toggleClass('panel-default panel-primary'); 
} 

$(document).on('click', '.panel-default', function() { 
    highlightActivePanel($(this)); 
}); 

, 나는 JQuery와 DataTables와 패널 내부 플러그인을 테이블에 있습니다. 따라서 click 이벤트를 등록하면 일반적으로 작동하지만, 어떤 이유로 든 패널 하단의 DataTables 페이징 번호 단추를 클릭 할 때 작동하지 않습니다. 클릭해도 발사되지 않습니다. 아마도 DT 자신의 클릭 이벤트 때문일 것입니다.

그래서, 다음 focus 이벤트 시도 :

$(document).on('focus', '.panel-default', function() { 
    highlightActivePanel($(this)); 
}); 

을 ... 그리고 더 나은 DataTables 버튼과 필드를 클릭 작동하지만 사용자가 단순히 텍스트를 클릭하면 작동하지 않습니다 (또는 테이블 셀에 있음).

마지막으로 두 이벤트 리스너를 모두 등록한 상태로두면 작동하는 것처럼 보입니다. 그러나 이것이 똑똑한 지 또는 더 나은 방법이 있는지 궁금합니다.

$(document).on('click', '.panel-default', function() { 
    highlightActivePanel($(this)); 
}); 
$(document).on('focus', '.panel-default', function() { 
    highlightActivePanel($(this)); 
}); 

제가 여기에 대해 더 자세히 설명하는 JsFiddle입니다.

---

편집 : 그냥 내가 쉽게 다음과 같은 두 가지 이벤트를 결합 할 수 있습니다 실현 :

$(document).on('click focus', '.panel-default', function() { 
    highlightActivePanel($(this)); 
}); 

을하지만 여전히이 작업을 수행 할 수있는 더 좋은 방법이 있다면 알려주세요. DataTables 페이징 번호 triggerspage.dt에

Answer 1

클릭, 당신이 (당신은 또한 할 수 있지만 그보다 구체적인 선택기를 사용하여) 페이지에 다른 뭔가에 포커스를 잃고 잠재적으로 방지하기 위해 click focus 대신에 click page.dt을 할 수 있도록.