загрузочный поповер для динамически создаваемой привязки в jQuery datatable - PullRequest
Новая
       20

загрузочный поповер для динамически создаваемой привязки в jQuery datatable

0 голосов
/ 22 октября 2018

Я пытаюсь привязать поповер к динамически созданному якору в jQuery datatable.Но это не работает. Я уже изучил здесь несколько тем, но не смог правильно их выполнить.Ниже приведен мой код.

Javascript 

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

Ниже приведена функция, которую я связал с событием щелчка якоря, динамически созданного в 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

Ниже приведен div содержимого popover в моем HTML 

<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>"

События запускаются, как ожидалось, и данные также выбираются и заполняются в popover DIV, но всплывающее окно никогда не отображается.

Любая помощь приветствуется, спасибо заранее.

1 Ответ

0 голосов
/ 22 октября 2018

Если вы создаете динамические всплывающие окна, вам необходимо делегировать их.

Попробуйте: 

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