Popover from the click of the content loaded via ajax

Question

I have the code

jQuery('a[rel=popover]').popover({
  html: true,
  title: '',
  content: function() {
    .....
    .....
  }
}).live('click', function(e) {
  e.preventDefault();
  ......
  ......
});

I have the link

<a rel="popover" href="#">link</a>

My problem is it works fine on click the link that are loaded when the page is loaded. But when the link is loaded via ajax, the popover is not working.

Answer 1

make sure you call popover after the ajax callback function (success) again for the dynamically added element.. and instead of live() use on() delegated event

jQuery.ajax({
    url:.....
    ...
    success:function(data){
        //codes to appene a
       jQuery('a[rel=popover]').popover({
               html: true,
               title: '',
               content: function() {
               .....
               .....
               }
       }); 
    } 
});

jQuery(document).on('click','a[rel=popover]', function(e) {
  e.preventDefault();
  ......
  ......
});