Jquery 获取popover数据内容中的HTML标记元素

我在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>

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

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

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

---

但是引导类正在被应用，在本例中，“btn”正在被应用到锚标记。连接。有人能给我解释一下吗？

文档准备好后，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');
});

---

要使其正常工作，您必须确保在popover选项中添加一个小的

延迟

，默认值为

0

。这使得这项工作由于某种原因无法进行

从触发popover的链接中删除

数据内容

属性，您不需要该属性，即使将选项中的

html

属性设置为

true

，该属性也不会起作用。

下一步是向触发元素添加一个事件侦听器，它将侦听

inserted.bs.popover

事件。当模板被添加到DOM中时，会触发这个

此时，您可以创建一个元素，将其添加到popover中，并为其分配click事件的侦听器。您不必创建元素，也可以使用

data content

属性添加元素

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

---

更新！ 我刚刚发现实际上只需要延迟。因此，Parth Shah提到的解决方案也会起作用

在单击内部链接之前，似乎正在触发popover的隐藏事件

这就是我们所需要的

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

$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover({
延迟：100//这是绝对需要的！
});
$（'#testOutside'）。单击（函数（）{
警报（“外部”）；
console.log（“外部”）；
});
});
//侦听插入到DOM的模板
$（'[data toggle=“popover”]'）。on（'inserted.bs.popover'，function（）{
console.log（$（'.popover content'）.find（'#testInside'）；
//创建内部链接。
$inside=$（''）；
//仅添加一次单击事件处理程序
$inside.one（'click'，function（）{
警惕（“内部”）；
console.log（'foo'）；
});
$（'.popover content'）.append（$in[0]）
})

---

实际上，使用.bs.popover所示的

触发器可以轻松地完成此操作。它将在弹出窗口显示后执行。然后可以添加新的侦听器或刷新现有侦听器

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

”>单击此处
我使用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'}
          });

})

你的问题很模糊。不幸的是，这不是真的，即使它看起来很明显。
数据内容
属性中的字符串只是一个字符串，它是通过
$.text（）
方法添加的。但这还不是全部，如果您强制弹出窗口使用
$.html（）
，它仍然无法工作。@DavidDomain很抱歉，但我不同意您的说法。下面是一个JSFIDLE演示我的答案：复制你的FIDLE链接，打开一个新的浏览器窗口，你会看到在chrome中，它只有在第二次点击触发器后才能工作，而在firefox中它根本不工作。@DavidDomain你是对的。今天我学到了一个新东西。谢谢你，先生！没问题，快乐编码。；-）附加正确答案解决方案-
$('[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'}
          });

})