引导弹出窗口以在 jQuery 数据表中动态创建锚点

Question

我正在尝试将弹出框绑定到 jQuery 数据表中动态创建的锚点。但它不起作用我已经在这里探索了几个线程但无法正确遵循。下面是我的代码。

Javascript

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

以下是我在数据表中动态创建的锚点的点击事件绑定的功能

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

下面是我的 HTML 中的弹出框内容 div

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

下面是为每个数据表行创建的锚

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

事件按预期触发，数据也被提取并填充到弹出框 DIV 中，但弹出框从未显示。

任何帮助表示赞赏，在此先感谢。

Answer 1

如果您要创建动态弹出框，则需要委托它们。

试试：

$( 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 );
        } );
    }
}