获取 popover data-content 中 HTML 标签的元素

Question

我在 Bootstrap3 的 "popover" 工作。我在这里放置了 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');
});
});

但是 bootstrap 类正在应用，在这种情况下 "btn" 正在应用到锚标记。附上jsFiddle。谁能给我解释一下？

Answer 1

当您的文档准备就绪后，DOM 中没有元素的 id 为 testInside。单击#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');
});

Answer 2

要使其正常工作，您必须确保在弹出窗口选项中添加一个小 delay，默认值为 0。由于某种原因，这使得它无法工作。

~~从触发弹出窗口的link中删除data-content属性，你不需要那个，它不会起作用，即使你设置html 属性在 true 的选项中。~~

下一步是向触发元素添加一个事件侦听器，它将侦听 inserted.bs.popover 事件。当模板添加到 DOM 时，这个会被触发。

此时您可以创建一个元素，将其添加到弹出窗口并将您的点击事件监听器分配给它。您不必创建元素，也可以使用 data-content 属性添加元素。

Here 您可以找到有关 Popover.js 选项和事件的信息

更新！

我才发现其实只是延迟而已。因此 Parth Shah 提到的解决方案也将起作用。

看起来弹出框的隐藏事件在你点击里面之前被触发了link。

所以这就是所有需要的

$('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>

Answer 3

实际上，可以使用 shown.bs.popover 触发器轻松完成。它将在弹出窗口显示后执行。然后可以add new listeners或刷新现有的。

Javascript

$('[data-toggle="popover"]').popover(
    {html:true}
);

$('[data-toggle="popover"]').on('shown.bs.popover', function () {
    $('#testInside').click(function(){
        alert('Inside');
    });

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

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>

Answer 4

我使用 shown.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'}
          });

})

获取 popover data-content 中 HTML 标签的元素

Get the elements of HTML tags inside data-content of popover

html

jquery

popover

twitter-bootstrap

bootstrap-popover

更新！