在popover的数据内容中获取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');
});
});

但是引导类正在应用,在这种情况下,"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>