How to use a Bootstrap popover in a dynamic table
<p>I am trying to implement the Bootstrap popover on my HTML page.  <br>I have a popup that is in an HTML table which I am building dynamically and I suspect I am not registering the event correctly.</p>

<p>My HTML:</p>

<pre><code>$.each(JSON.parse(data), function (index, elem) {                 
    var radioBtn = "&lt;input type='radio' name='radOption' class='radio selectedOptionAdd' data-value='myData' /&gt;";     
    var popupContent = "TO DO MAKE A TABLE OF DATA";
    var popupControl = "&lt;a class='btn btn-lg btn-danger permissionPopUpButton' role='button' data-toggle='popover' data-trigger='focus' title='Dismissible popover' data-content='" + popupContent + "'&gt;Dismissible popover&lt;/a&gt;";
    myTable += "&lt;tr&gt;&lt;td&gt;" + radioBtn + "&lt;/td&gt;&lt;td&gt;" + popupControl  + "&lt;/td&gt;&lt;/tr&gt;";
});
</code></pre>

<p>In my document.ready I have the following statement:</p>

<pre><code>// Originally tried this but this doesn't work
//$('[data-toggle="popover"]').popover();

$("body").on("click", ".permissionPopUpButton", function () {
    $('[data-toggle="popover"]').popover();
});
</code></pre>

<p>Any advice on how to correctly register this event?</p>