jquery - 获取 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”正在应用于 anchor 标记。附上 jsFiddle .谁能给我解释一下？

Answer 1

实际上，可以使用 shown.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

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