2017-03-25 16 views
0

私は今までのところ正しく動作するブートストラップ・ポップ・オーバーを持っています。ブートストラップv4ポップオーバーの隠れたイベント

しかし、私は問題のイベントがあります。 show.bs.popoverイベントとshown.bs.popoverイベントは期待どおりに機能しますが、非表示イベントや隠れイベントは発生しません。

$('#element').popover({ >options here< }) 
.popover('show') 
.on('show.bs.popover', function() { 
... 
}) 
.on('shown.bs.popover', function() { 
... 
}) 
.on('hidden.bs.popover', function() { 
alert('hidden'); //NOT WORKING 
}); 

私はどこか分かりません。たぶん、隠しコードは後で実行する必要があります。おそらく、この関数が呼び出されているときにポップオーバーは存在しないでしょう。

だからアイブ氏はまた、ポップオーバーのIDを取得し、このようにそれを呼び出してみました...

$('#popover_id').on('hidden.bs.popover', function() { 
alert('hidden'); //NOT WORKING 
}); 

しかしこのdoesntのはどちらか動作するようです。

どのような提案も素晴らしいでしょう!

答えて

0

このスニペットをご覧ください。うまくいきます。アラートボックスを表示するには、ボタンを2回クリックしてください。

$('#element').popover({ placement: 'bottom', content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.' }) 
 
    .popover('show') 
 
    .on('show.bs.popover', function() { 
 
    }) 
 
    .on('shown.bs.popover', function() { 
 
    }) 
 
    .on('hidden.bs.popover', function() { 
 
    alert('hidden'); 
 
    });
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 
<button id="element" type="button" class="btn btn-secondary"> 
 
    Popover on bottom 
 
</button>

+0

ありがとうございます。これは動作しますが、唯一の違いはデータ属性で呼び出す方法だけです。私はなぜそれがprogramatically doesnt仕事であるかわからない。 – Aparistar

+0

すべてのデータ属性を削除しましたが、それでも機能します。また、スニペットに含まれているライブラリのjsファイルへの参照をチェックしてください。多分あなたは異なったバージョンを持っているかもしれません。 – dodbrian

0

だから私はあることがわかっ問題は、プログラムではJavaScriptを使用してポップオーバーを表示したときにということでしたし、それを削除するには「処分」を使用し、「非表示」と「隠された」のイベントがありますブートストラップの文書では、 'dispose'関数が「ポップオーバーを隠して破壊する」と言っているにもかかわらず、決して発砲しませんでした。

関連する問題