Twitter Bootstrap Popover with dynamic content

Question

I am trying to get Bootstrap popovers to work on dynamic content. I have a jQuery AJAX request that returns some rows of data. The AJAX success function will loop through and generate HTML code from the retrieved data. The generated HTML has the Bootstrap code in it but it doesn't work. If I just write the HTML code normally, it works fine.

This is an example of what I'm trying to do. newRowReg just loops through each record retrieved and appends it to the HTML string.

newRowReg += "<tr>";
newRowReg += "<td>" + xStatus + "</td>";
newRowReg += "<td><img src='green dotx.jpg' class='ppt1' data-container='body' data-toggle='popover' data-placement='right' data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'>";
newRowReg += "</tr>";
$("#regTbl").append(newRowReg);

The Javascript code for the popup.

$('.ppt1').popover({
    title: 'Title 1',
    trigger: 'hover',
    content: 'Some Content!'
  });

How do I get this to work when it's generated dynamically like this?

Answer 1

Lets have a link like this

<a href="#" id="show_media" class="btn btn-small btn-info" 
                            rel="popover" 
                            value="{{ $value->id }}"
                            data-content="<div id='div{{ $value->id }}'></div><script>loadMedia({{ $value->id }})</script>" 
                            data-original-title="My Title">Show Media</a>

Then before the body ends

  <script>  
    $(function (){ 
        $("#show_media").popover({placement: 'top', html: true});
    }); 
    function loadMedia(adsId){
        console.log("Ads ID: " +adsId);
        $('div#div' + adsId).html('xxxx');
    } 
    </script>