Cannot click on html elements inside bootstrap popover title html

Question

I have a popover with html:true; I want to click on an element in the title, to close the popover, but it does not seem to do the job.

test fiddle http://jsfiddle.net/9P64a/1362/

Answer 1

Bootstrap dynamically creates and deletes the popover element ever time the element appears / disappears (as opposed to showing and hiding an element that is only created once). To account for this, you need to list the parent container when you use jQuery's .on() method.

Change

$('#btncancel').on("click",function()

to

$('body').on('click', '#btncancel', function()

The above looks for the element #btncancel within the HTML body element and will do so even if #btncancel is created / deleted / recreated on the DOM.

Example

Answer 2

What version of jquery you are using??

In your fiddle

$('#popoverData').popover({ html: true });
$('#btncancel').live("click",function(){
    $('#popoverData').popover('hide');
});

I used live() for generated pages and frames. But in jQuery 1.9 this function is deprecated and does not work.

Already answered here Turning live() into on() in jQuery

Update

$('#popoverData').popover({ html: true });
$(document).on("click", '#btncancel', function () {
   $('#popoverData').popover('hide');
} );