bootstrap popover to dynamically created anchor in jQuery datatable

Question

I am trying to tie an popover to dynamically created anchor in jQuery datatable. But it is not working I have already explored couple of threads here but not able to follow properly. Below is my code.

Javascript

$(document).ready(function(){
    /* reference verse popup */
    $('#bibletext').on('click','a#btnrefpop',showrefpop);
});

Below is the funciton I have bound on a click event of an anchor dynamically created in datatable

function showrefpop(e)
{
    e.preventDefault();
    var refverse = e.currentTarget.innerText;
    var passage = getPassage(refverse);
    var refelemid = '#'+e.currentTarget.id;
    if (passage != undefined)
    {
         dbservice.fetch(bibleConfig.geturl,passage)
        .done(function(res){
            $(refelemid).popover({
                 html:true,
                 container : 'body',
                 content: function(){ return 
                            $('#verserefpopover').html(res.versetext); 
                    }
            });
          })
         .fail(function(err){
             siteConfig.log(err);
          });
    }
}

HTML

Below is the popover content div in my HTML

<div id="verserefpopover" class="hide-menu"></div>

Below is the anchor which is created for each datatable row

"<a hef='' id='btnrefpop' data-toggle='popover' data-placement='right' data-html='true' class='refspan'>"+vrefs[i]+"</a>"

Events are fired as expected and data is also fetched and populated in popover DIV but the popup is never shown.

Any help is appreciated, thanks in advance.

Answer 1

If you are creating dynamic popovers you need to delegate them.

Try:

$( function () {
    /* delegate popover */
    $( document ).popover( {
        html: true,
        trigger: 'click', // click, hover, focus
        selector: '.refspan[data-toggle="popover"]',
        container: 'body'
    } );

    /* reference verse popup */
    $( '#bibletext' ).on( 'click', '.refspan[data-toggle="popover"]', showrefpop );
} );

function showrefpop( event ) {
    event.preventDefault();

    var self = this;
    var refverse = self.innerText;
    var passage = getPassage( refverse );
    if ( passage != undefined ) {
        dbservice.fetch( bibleConfig.geturl, passage ).done( function ( res ) {
            var verserefpopover = $( '#verserefpopover' );
            verserefpopover.html( $.parseHTML( res.versetext ) );

            var jqueryEl = $( self );
            jqueryEl.attr( 'data-content', verserefpopover.html() );
            jqueryEl.popover( 'hide' );
            jqueryEl.popover( 'show' );
        } ).fail( function ( err ) {
            siteConfig.log( err );
        } );
    }
}