12

（ポップオーバー自体ではなく）開いてpopoverいるときに開いているものを閉じようとしています、any body elementis focused

私もです：

 $(document.body).on('focus focusout focusin', function(e) {
  if( e.target.classList.contains('popover') ){return false;}
  else{
    $('*').popover('hide');
  }
  // code to close the popover
});

これは上ではうまく機能しますが、上では機能しChromeません。ポップオーバーを閉じる前に行う必要があります。FFFFfocusin and focusout

これがChromeでのみ機能する私の例です：http：//jsfiddle.net/CU5U5/4/

どうすればこれを修正できますか？

4

6 に答える 6

26

別の方法：

$(document).on('focus', ':not(.popover)', function(){
    $('.popover').popover('hide');
});

編集：

結局のところ、私の上記の答えは正しくありません。ポップオーバーがインスタンス化された要素で.popover（'hide'）を呼び出す必要があります....popover自体ではありません。また、リンク上のクリックイベントの伝播を停止して（つまり、クリックハンドラーでfalseを返す）、ドキュメントルートにバブルしないようにする必要があります。答えについては、http：//jsfiddle.net/aFacG/1/を参照してください。

HTML

<a data-content="a popover" id="mypopover" href="#">click me</a>

JS

$(document).ready(function(){
  $("#mypopover").popover();

  $(document).on('click', function(){
      $("#mypopover").popover('hide');
  });

  $('#mypopover').click(function(){
      return false;
  });
});
于 2013-01-11T19:18:58.363 に答える
8

現在受け入れられている回答の問題は、ツールチップ内をクリックしてもポップオーバーが非表示になることです（入力フィールドなど、ポップオーバー内で操作する要素がある場合は不適切です）。

ポップオーバーコンテナでstopPropagationメソッドを使用して、hideイベントがDOMをバブリングするのを防ぎます。

更新（ブートストラップURLが変更されました）：http：//jsfiddle.net/bNvX7/10/

$(document).ready(function(){

    //Initialize popover on element
    $("#mypopover").popover();

    //Attach click handler to document
    $(document).bind('click', function (e) {
        $("#mypopover").popover('hide');
    });

    //Dont hide when I click anything inside #container
    $('#container').bind('click', function(e) {
        e.stopPropagation();
    });
});
于 2013-02-01T22:14:14.160 に答える
7

非常に単純であること：

$('.popover').remove();
于 2015-06-30T02:02:45.893 に答える
1

呼び出し

$('.popover').popover('hide');

現在開いているすべてのポップオーバーを閉じます。

于 2019-09-10T09:02:05.057 に答える
0

これは、ハンドラーを1つだけ必要とし、トグル/リンクに属性data-rel = "popover"が含まれているすべてのポップオーバーで機能する、もう少し一般的なアプローチです。例：

HTML

<a href="#" data-rel="popover">toggle</a>

JS

  $(document).on('click', function(event) {
    var $clicked = $(event.target);

    if ($clicked.closest('[data-rel="popover"]').length) {
      return;
    } else if ($clicked.closest('.popover').length) {
      event.stopPropagation();
    } else {
      $('[data-rel="popover"]').popover('hide');
    }
  });
于 2014-06-03T01:22:59.933 に答える
0

多分あなたはこれを試すことができます：

        // Part 1: initialize the popver
        var button = template.find(".itemInfo button");
        // add a class name to identify the target later.
        button.addClass("popover-toggle");

        var content = $("<div>test</div>");

        button.popover({
            container:"body",
            content: content,
            html:true,
            placement:"top",
            title:"Popover title",
            trigger:'click'
        });

        // Part 2: add click event listener 
        $(document).on("click", function(event){
            var target = $(event.target);
            $.each( $(".popover-toggle"), function(index, value){
                var _target = $(value);
                // not click on the button and not click on the popover it self
                if( !target.is( _target ) && target.closest(".popover").length == 0 ){
                    _target.popover("hide");
                }
            });
        });

ベストプラクティスではありませんが、ChromeとFFの両方で正常に機能します。

于 2014-12-27T03:25:07.230 に答える