アクティブなパネルのブートストラップパネル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ののDataTableプラグインを持つテーブルを持っている、です。したがって、clickイベントを登録すると、一般的には機能しますが、何らかの理由でパネルの下部にあるDataTablesページング番号ボタンをクリックしても表示されません。クリックも発射されません。おそらくDTの独自のクリックイベントのために、私は推測しています。

だから、私はその後、focusイベント試してみました：

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

を...、それがより良いのDataTableのボタンとフィールドをクリックして動作しますが、ユーザーは単にテキストをクリックした場合は動作しません（またはテーブルセル内）に配置します。

最後に、単に両方のイベントリスナーを登録したままにしておけば、それはうまくいくように思えますが、これがスマートなのか、それとももっとクリーンな方法があるのでしょうか？

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

をしかし、まだこれを行うには良い方法があれば、私に知らせてください。

Answer 1

あなたが潜在的にページ上の他の何かにフォーカスを失わないようにclick focusの代わりにclick page.dtを行うことができるように（あなたはまた、より具体的なセレクタを使用していることを行うことができますが）、DataTableのページング番号triggerspage.dtをクリックします。