ブートストラップ：ポップオーバーボタンのリンクが機能しない

Question

カスタマイズされたjqueryでブートストラップポップオーバーを使用しました。 Popover関数は正常に動作していますが、外部リンクのあるボタンを追加した場合はが動作しません。コードを参照してください：外部リンクのための2つのボタン "Button1" & "Button2"があります。

$(document).ready(function() { 
 
    $("body").tooltip({ 
 
    selector: "[data-toggle='tooltip']", 
 
    container: "body" 
 
    }) 
 
    .popover({ 
 
    selector: "[data-toggle='popover']", 
 
    container: "body", 
 
    html: true 
 
    }); 
 
}); 
 

 
$('body').on('click', function (e) { 
 
    $('[data-toggle="popover"]').each(function() { 
 
    if(!$(this).is(e.target) && 
 
     $(this).has(e.target).length === 0 && 
 
     $('.popover').has(e.target).length === 0) { 
 
     $(this).popover('hide'); 
 
    } 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
 
    <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title=""> 
 
    Button1 
 
    </a> 
 
    
 
    <a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a> 
 
</div>

Answer 1

あなたは番目のボタンにはいくつかのdata-toggle、data-placement構文のを逃しています！これらを追加すると、2番目のボタンには最初のボタンと同じ機能が与えられます。私はこれをあなたのコードに追加しました：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript"> $(document).ready(function() { 
     $("body").tooltip({ 
      selector: "[data-toggle='tooltip']", 
      container: "body" 
     }) 
       .popover({ 
        selector: "[data-toggle='popover']", 
        container: "body", 
        html: true 
       }); 
    }); 

    $('body').on('click', function (e) { 
     $('[data-toggle="popover"]').each(function() { 
      if(!$(this).is(e.target) && 
        $(this).has(e.target).length === 0 && 
        $('.popover').has(e.target).length === 0) { 
       $(this).popover('hide'); 
      } 
     }); 
    });</script> 

<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
    <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title=""> 
     Button1 
    </a> 

    <a class="btn btn-danger" href="http://facebook.com" data-placement="top" data-toggle="popover" data-content="Popover" data-original-title="" title="" target="_blank">Button2</a> 
</div> 

Answer 2

スタックオーバーフロースクリプトによってリンクが新しいページ/リダイレクトを開けないようブロックされています。あなたのコードでこれを試してみてくださいcodepen： http://codepen.io/TunderScripts/pen/oYYbgW

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
    <a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title=""> 
    Button1 
    </a> 

    <a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a> 
</div> 


$(document).ready(function() { 
    $("body").tooltip({ 
    selector: "[data-toggle='tooltip']", 
    container: "body" 
    }) 
    .popover({ 
    selector: "[data-toggle='popover']", 
    container: "body", 
    html: true 
    }); 
}); 

$('body').on('click', function (e) { 
    $('[data-toggle="popover"]').each(function() { 
    if(!$(this).is(e.target) && 
     $(this).has(e.target).length === 0 && 
     $('.popover').has(e.target).length === 0) { 
     $(this).popover('hide'); 
    } 
    }); 
});