2つのjquery "on"イベントが重複しています

Question

$（documentin）.on（ 'focusin'）を追加します。 show.bs.popoverが起動されたときに限ります。 http://codepen.io/anon/pen/GrWzNg?editors=1111

$('[data-toggle="popover"]').popover() 
$(document).on('show.bs.popover', function(e) { 
    var popoverOpened = $(e.target); 
    $(document).on('focusin', function(e) { 
    popoverOpened.popover("hide"); 
    }); 
}); 

また、私は別のボタンに焦点を当てた場合、以前に開いたポップオーバーを閉じる必要があります。

ここで確認できます。このコードの問題は、ボタンを数回クリックした後にコンソールログを複製したことです。

console.logを1回だけ起動できるようにします。

偶数show.bs.popoverが起動されていない場合、イベントのフォーカスをすべてに追加したくないのですが...とにかくこれを行うには？

Answer 1

あなたが達成しようとしていることが完全にはわからないため、お手伝いするのは少し難しいです。あなたは完全なドキュメントにfocusinイベントをバインドしていますか？それはあなたが常に文書に焦点を当てているので、奇妙に思えます。とにかく、この問題に取り組むことができるのは、popoverにクラス 'in'があるかどうかをチェックすることです。これと同じように：

if($('.popover').hasClass('in')){ 
    console.log("hey"); 
} 

これの問題点は、ポップオーバーの開始イベントが発生した瞬間にチェックしているので、それはあまりにも早くチェックされますです。すべて一緒に、私はあなたがこれをしたいと思う：

$('[data-toggle="popover"]').popover().on('mouseover', function(e) { 
    $('[data-toggle="popover"],[data-original-title]').each(function() { 
    if (!$(this).is(e.target)) { 
     (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false 
    } 
    }); 
}); 

上記のコードは、ボタンをクリックしたときpopoversをオープンしますが、別のボタンを置くと、他のすべての開いているpopoversを閉じます。

Answer 2

代わりにこのようなものを試してみてください。

イベントshow.bs.popoverがトリガーされるたびに、重複するイベントハンドラーを追加していました。また、ボタンだけでなく、focusinバインディングのドキュメント全体をターゲットにしていたので、ボタンをクリックするとすぐにfocusinバインディングがトリガーされます。

最初にポップオーバーを表示したのと同じ方法で、セレクタ$('[data-toggle="popover"]')でボタンをターゲットにし、別のボタンmouseoverを押すたびにすべてのポップオーバーを非表示にします。私はこれがあなたが使用しようとしていたものだと思うので、focusinの代わりにmouseoverを使用しました。 focusinイベントは、タブのボタンから次のボタンへ、または実際に別のボタンをクリックしたときにのみトリガーされます。

$('[data-toggle="popover"]').popover() 
 

 
$('[data-toggle="popover"]').on('mouseover', function(e) { 
 
    $('[data-toggle="popover"]').popover("hide"); 
 
});

.container { 
 
    margin-top:100px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover on left 
 
</button> 
 

 
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover on top 
 
</button> 
 

 
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus 
 
sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover on bottom 
 
</button> 
 

 
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover on right 
 
</button> 
 
    
 
    </div>