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

Question

我在 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。谁能给我解释一下？

Answer 1

实际上，使用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 2

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

从触发弹窗的链接中删除data-content属性，你不需要那个，它也不起作用，即使你将选项中的html属性设置为true。

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

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

Here你可以找到有关 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>

Answer 3

当您的文档准备就绪时，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 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'}
          });

})