5

次のコンテンツを Twitter Bootstrap ポップオーバーに配置しています。これには、クリックをリッスンするリンクが含まれています。

<div id="popover-content">
  <a id="link" href="#">click</a>
</div>

ボタンを使用して、上記のコンテンツを含むポップオーバーを表示しています:

<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>

次に、ボタンをポップオーバーに関連付け、jQuery のclick()関数を使用して、ポップオーバーに含まれるリンクのクリックをリッスンします。

$(function(){
  $('#trigger').popover({ 
    html: true,
    content: function() {
      return $('#popover-content').html();
    }
  }); 

  $('#link').click(function() {
    alert('beep');
  });
});

ただし、ボタンをクリックしてポップオーバーを表示してからリンクをクリックすると、上記の意図どおりにクリックが検出されないようです。DOM と javascript と jQuery についての私の理解はかなり限られているため、ここで何が起こっているのかわかりません。ポップオーバーに含まれる要素のアクションを選択/リッスンするにはどうすればよいですか?

参考：Bootstrap のポップオーバー

4

3 に答える 3

7

ここでイベント委任を実行する必要はありません。$('#popover-content')代わりに$('#popover-content').html()、コンテンツの設定中に使用します。これにより、委任を必要とせずに、登録されたイベントがデフォルトで添付されます。

デモ

$(function(){
  $('#trigger').popover({ 
    html: true,
    content: function() {
      return $('#popover-content'); //<-- Remove .html()
    }
  }); 

  $('#link').click(function() {
    alert('beep');
  });
});
于 2013-05-11T07:07:49.630 に答える
2

これを試すことができます：

$(document).on('click', '#link', function(){
    alert('beep');
});
于 2013-05-11T06:56:54.730 に答える
0

ポップオーバーを手動で使用できます：

html

<div id="popover-wrapper">
  <button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
  <div class="popover right popup-area popover-pos">
    <div class="popover-content">
      <div id="popover-content">
        <a id="link" href="#">click</a>
      </div>
    </div>
  </div>
</div>

CSS

#popover-wrapper {
  .popover {
    left: auto;
    right: 0;
    width: 250px;
    top: 35px;

    .popover-content {
      // ..
    }
  }

  &.open .popover {
    display: block;
  }
}

js

  $('#trigger').hover(function() {
    $(this).stop(true, true).delay(250).queue(function(next){
      $(this).addClass('open');
      next();
    });
  }, function() {
      $(this).stop(true, true).delay(250).queue(function(next){
        $(this).removeClass('open');
        next();
      });
    }
  );
于 2014-05-30T02:04:29.460 に答える