8

次のようにして、新しいポップオーバーが選択されたときに、他のすべてのポップオーバーを非表示にしようとしています:

私のHTML

a.btn#requests(rel='popover',data-placement='bottom',data-original-title='<b>Requests</b>',data-content='My content goes here')

私のJavascript

  $(function (){
    console.log('start');
    $('#requests').popover();
    $('#messages').popover();

  });

  //This doesn't work for some reason?
  $('#requests').on('show', function (e) {
    console.log('requests');
    $('#messages').popover('hide');
  });

  $('#messages').on('show', function () {
    console.log('messages');
    $('#requests').popover('hide');
  });

ただし、私の console.log('requests') と console.log('messages'); リクエストとメッセージのポップオーバーが表示されていても表示されません。何が間違っていますか?

4

6 に答える 6

22

Bootstrap はポップオーバー イベントをサポートするようになりました -公式ポップオーバー ドキュメントのイベント セクションを参照してください(ドキュメントの変更ログはこちら)。

例：

$('#requests')
.popover()
.on('show.bs.popover', function() { console.log('o hai'); })
.on('hidden.bs.popover', function() { console.log('ciao'); });
于 2014-10-17T02:45:52.450 に答える
8

popover プラグインはイベントをトリガーしません。ツールチップ プラグインも同様です (ポップオーバーはツールチップを拡張するため)。代替案については、この問題 (github)を確認してください。

に応じて、さまざまな JS イベントを使用できますtrigger。あなたの例：デモ（jsfiddle）

$(function (){
    console.log('start');
    $('#requests').popover();
    $('#messages').popover();

    $('#requests').on('click', function (e) {
        console.log('requests');
        $('#messages').popover('hide');
    });

    $('#messages').on('click', function () {
        console.log('messages');
        $('#requests').popover('hide');
    });

});

なぜ'click'ですか？バージョン 2.1.1 のデフォルトのポップオーバー トリガーはclick. ポップオーバー ドキュメント (github)を参照してください。

次のイベントを使用できます。

  • trigger: 'click'： の上click
  • trigger: 'hover': 表示オンmouseenterと非表示オンmouseleave
  • trigger: 'focus': 表示オンfocusと非表示オンblur
  • trigger: 'manual': とにかく独自のコードを使用して表示および非表示にします
于 2012-10-25T22:44:43.047 に答える
2

クラスを使用して、より整理されたコードを使用することで、簡単に実行できます。

$(document).ready(function(){

    $('.btn').popover();

    $('.btn').on('click', function (e) {
        $('.btn').not(this).popover('hide');
    });
});

ここで私のデモをチェックしてください

内部にフォーム コントロールが必要な場合は、次のコードをカスタマイズします。

var mycontent = '<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'

$('.btn').popover({
        content:mycontent,
        trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});


   $('.btn').on('click', function (e) {
       $('.btn').not(this).popover('hide');
    });
});

ここでデモをチェック

于 2013-04-23T06:25:36.653 に答える
0

これを試して：

            $(document).on('click', function(e) {
                if (!$(e.target).is('[data-original-title]')) {
                    $('[data-original-title]').popover('hide'); 
                }
            });

            $(document).on('show.bs.popover', function(e) { 
                $('[data-original-title]').popover('hide'); 
            });

これにより、ドキュメント全体にイベント ハンドラーが設定され、それがポップオーバー要素でない場合は、すべてのポップオーバーが非表示になります。

また、イベント show.bs.popover (ポップオーバーを開く前にトリガーされる) では、他のすべてが非表示になります。

于 2014-06-11T19:12:12.503 に答える
0

そうじゃ.on('shown')ない.on('show')

于 2016-10-19T19:18:52.420 に答える