ブートストラップリンク内のキャレットアイコンをクリックしても動作しません

Question

ブートストラップv3.3.7とjQuery v1.12.4を使用して、HTMLポップオーバーを有効にするコンポーネントを作成しています。

下記のコードをご覧ください。

ボタンをクリックすると、ポップオーバーが有効になります。ただし、ボタン内のキャレットアイコンをクリックしても何も行われません。どのようなアイデアの理由とこれを解決する方法？

Click here for the jsfiddle。

<a role="button" class="btn btn-default po" data-poc="#html1">Test 1 <span class="caret"></span></a> 
<a role="button" class="btn btn-default po" data-poc="#html2">Test 2 <span class="caret"></span></a> 
<div id="html1" class="hide"> 
    <strong>This</strong> is a test! 
</div> 
<div id="html2" class="hide"> 
    <strong>This</strong> is another test! 
</div> 

Answer 1

使用この

<a id="po1" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Test <span class="caret"></span></a> 

click here