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

Posted 2023-05-08

【中文标题】引导弹出窗口以在 jQuery 数据表中动态创建锚点

【英文标题】：bootstrap popover to dynamically created anchor in jQuery datatable

【发布时间】：2019-03-26 16:02:39

【问题描述】：

我正在尝试将弹出框绑定到 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 中，但弹出框从未显示。

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

【参考方案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 );
         );
    

【讨论】：

谢谢 Zavarock....我理解缺乏授权并让它发挥作用。然而，当我点击不同的锚点时，弹出内容并没有改变。它保持静态为“正在加载......”。

我很抱歉.....我的 json 格式导致了这个问题。现在一切都好！！！非常感谢您对 Zavarock 的帮助。真的很感激。

@SherebyahTishbi 很高兴知道。如果我的回答解决了您的问题，如果您将其标记为已接受，我将不胜感激。

是的，我刚刚将您的答案标记为已接受。一切工作如此顺利！很好的解决方案！

刚刚意识到这里有一个问题。需要点击 2 次才能显示动态内容。第一次点击显示“正在加载...”，第二次点击显示实际的动态内容。