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

Question

I am working in the "popover" of Bootstrap3. Here I have placed the HTML contents like below,

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

I am not able to refer to the html element present inside the data-content attribute.

Like below,

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

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

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

But the bootstrap classes are getting applied, In this case "btn" is getting applied to the anchor tag. Attaching the jsFiddle. Can anyone explain this to me?

Answer 1

Actually, it is possible to do it easily using the shown.bs.popover trigger. It will be executed after the popover is shown. It is then possible to add new listeners or refresh the existing ones.

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>