警告を閉じてリンクを訪問するブートストラップアラートリンク

Question

hrefタグとdata-dismiss="alert"タグの両方をブートストラップアラートのリンクに入れると、予期した動作が得られません。予想される動作は、リンクとを開いて警告を閉じることです。私はそれがどちらか一方をすることを見ましたが、決して両方をすることはありません。

<div class="alert alert-danger"> 
<strong>Oh snap!</strong> Links in Bootstrap alerts are broken: 
<a target="_blank" href="http://google.com" class="alert-link" data-dismiss="alert">Go to Google on new tab.</a> 
</div> 

どうすればこのバグを回避できますか？

この質問はこれと非常によく似ています：Following link before closing Bootstrap Alertここでは、私の場合は該当しない単一のリンクの場合について非常に具体的な回答があります。

ここでうまくいけば、私が何をしようとしている明確に私の警告、です：

Answer 1

ブートストラップ4 - あなたはこの問題にアプローチする必要があります複数のリンクを持つ複数のリンク

は、逆に。イベントリスナーを親の&に配置すると、子を特定するための参照パスが存在しないため、子を見つけることはできません。

代わりに、各子リンクにイベントリスナーを配置します。次に、何がクリックされたかがわかります。クリックした後は、親から手動でclosed.bs.alertをトリガーすることができます。子供から簡単に検索できます。

$('.alert a').on('click', function (e) { 
    $(e).parent().trigger('closed.bs.alert'); 
    window.open($(e.target).attr('href')); 
}); 

BS4-ML：https://codepen.io/benjaminwfox/pen/vejLzz

ブートストラップ4

あなたはあなたのリンクのそれぞれにイベントリスナーを追加することにより、ブートストラップパラダイムの中でそれを維持することができます。これは基本的に、リンクした質問の回答と同じですが、特定のIDではなくクラスセレクタに基づいてリスナを適用するだけです。この方法は、あなたは、アラートの削除を処理するために何かをする必要はありません。：

$('.alert').on('closed.bs.alert', function (e) { 
    console.log('Closed, alerted', $(e.target).children('a').attr('href')); 
    window.open($(e.target).children('a').attr('href')); 
}) 

BS4：https://codepen.io/benjaminwfox/pen/veXOEL

4と非常に似てブートストラップ3

が、あなた'LL

<div class="alert alert-danger"> 
    <strong>Oh snap!</strong> Links in Bootstrap alerts are broken: 
    <a data-dismiss="alert" data-href="http://www.msn.com" href="#">Go to Google on new tab.</a> 
</div> 

$('.alert').on('closed.bs.alert', function (e) { 
    window.open($(e.target).children('a').attr('data-href')); 
}); 

BS3：https://codepen.io/benjaminwfox/pen/bowQQy

URL用のカスタムタグを使用する必要があります

非ブートストラップ・オプション

あなたは全体のプロセスを独自のコントロールの多くを望んでいた場合は、後にしているリンクの動作を作成する独自のJavaScriptメソッドを書くことです。そのようなマークアップでそれを実装します。

thisは <a>タグへの参照ですので、あなたが elementスタイルに今何を行うことができ、およびURLが p_urlとして渡されますので、リンクを開くことができ

<div class="alert alert-danger"> 
    <strong>Oh snap!</strong> Links in Bootstrap alerts are broken: 
    <a href="#" onclick="jsfunc(this, 'http://google.com')">Go to Google on new tab.</a> 
</div> 

：

function jsfunc(element, p_url) { 
    element.parentNode.style.display = 'none'; 
    window.open(p_url); 
} 

NO BS：https://codepen.io/benjaminwfox/pen/GMjgbq