2

Bootstrap3 の「ポップオーバー」で作業しています。ここでは、以下のような HTML コンテンツを配置しました。

<a href='#' class='btn' title ='Test' data-trigger='focus' data-
toggle='popover' data-html='true' id = 'testOutside' data-content='<a 
href="#" id="testInside" class="btn">Inside</a>'>Click Here </a>

data-content 属性内にある html 要素を参照できません。

以下のように、

$(document).ready(function(){
$('[data-toggle="popover"]').popover();

// the below is not working
$('#testInside').click(function(){
alert('Inside');
});

$('#testOutside').click(function(){
alert('Outside');
});
});

しかし、ブートストラップ クラスが適用されています。この場合、「btn」がアンカー タグに適用されています。jsFiddle を添付します。誰かが私にこれを説明できますか?

4

4 に答える 4

3

これを機能させるdelayには、ポップオーバー オプションに小さな値を追加する必要があります。デフォルト値は です0。これにより、何らかの理由でこれが機能しなくなります。

ポップオーバーをトリガーするリンクから属性を削除しdata-contentます。それは必要ありません。htmlオプションのプロパティを に設定しても機能しませんtrue。

次のステップは、イベントをリッスンするトリガー要素にイベント リスナーを追加することinserted.bs.popoverです。これは、テンプレートが DOM に追加されたときに発生します。

その時点で、要素を作成してポップオーバーに追加し、クリック イベントのリスナーをそれに割り当てることができます。要素を作成する必要はなく、data-content属性を使用して要素を追加するだけです。

ここでは、Popover.js のオプションとイベントに関する情報を見つけることができます

アップデート！

実際に必要なのは遅延だけであることがわかりました。したがって、Parth Shahが言及したソリューションも同様に機能します。

内部リンクをクリックする前に、ポップオーバーの非表示イベントがトリガーされているようです。

必要なのはそれだけです

$('you-selector').popover({
    delay: 100
});


$(document).ready(function(){
  $('[data-toggle="popover"]').popover({
    delay: 100 // this is definitely needed !
  });


  $('#testOutside').click(function(){
    alert('Outside');
    console.log('outside');
  });

});

// Listen for inserted template to DOM
$('[data-toggle="popover"]').on('inserted.bs.popover', function () {
  console.log($('.popover-content').find('#testInside'));
  // Create the inside link.
  $inside = $('<a href="#" id="inside">Inside</a>');
  // Add the click event-handler only once
  $inside.one('click', function() {
    alert('Inside');
    console.log('foo');
  });
  $('.popover-content').append($inside[0])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<a href='#' class='btn' title ='Test' data-trigger='focus' data-toggle='popover' data-html='true' id = 'testOutside'>Click Here </a>

于 2015-07-19T02:35:17.487 に答える
1

ドキュメントの準備ができたら、DOM には testInside の ID を持つ要素はありません。#testOutside をクリックすると、この要素が作成されます。このため、で作成したイベント ハンドラ$(document).ready(...)は役に立ちません。

したがって、これを行う適切な方法は、#testInside が DOM に追加された直後にコールバックを登録することです。これは、#testOuside がクリックされたときに発生することがわかっています。

// adding delay over here due to popover close event may trigger before link click event (which happens in Firefox)
$('you-selector').popover({
    delay: 100
});

$('#testOutside').click(function(){
    $('#testInside').click(function(){
        alert('Inside');
    });

    alert('Outside');
});
于 2015-07-19T01:44:38.997 に答える
0

show.bs.popoverを使用して非常に困難な問題を単純に可能にしましたが、 pophover に評価コンポーネントがありますが、問題は、このメソッドを呼び出す必要があるため、評価がホバーイベントを取得できないことでした評価入力が作成されます。

$(".rating_product").rating('refresh', 
 {showClear: false,hoverEnabled:true,hoverChangeStars:true,showCaption: true,starCaptions: {5.0:'5 Stars'}
 });

だから私はこれを入れて、挿入された機能よりもうまくいきました。

$('[data-toggle="popover"]').on('shown.bs.popover', function () {


          $(".rating_product").rating('refresh', 
            {showClear: false,hoverEnabled:true, hoverChangeStars:true,showCaption: true,starCaptions: {5.0:'5 Stars'}
          });

})
于 2015-12-08T13:24:43.260 に答える