Question

我正在尝试将弹出窗口与jQuery数据表中动态创建的锚点关联。但是它不起作用，我已经在这里探索了几个线程，但是不能正确地遵循。下面是我的代码。

JavaScript

def f(matrix, columns):
    return [[matrix[row][i] for i in columns] for row in range(len(matrix))]
print(f(M, L))
#result: [[0, 1], [0, 1], [0, 1], [0, 1]]

下面是我绑定到数据表中动态创建的锚的click事件的功能

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

HTML

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

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

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

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

将按预期触发事件，并且还会在弹出式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 );
        } );
    }
}

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

1 个答案: