bootstrap 弹出到 jQuery 数据表中动态创建的锚点
bootstrap popover to dynamically created anchor in jQuery datatable
我正在尝试将弹出窗口绑定到 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
中的popover内容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 但弹出窗口从未显示。
感谢任何帮助,提前致谢。
如果您要创建动态弹出窗口,则需要委托它们。
尝试:
$( 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 数据表中动态创建的锚点。但它不起作用我已经在这里探索了几个线程但无法正确遵循。下面是我的代码。
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
中的popover内容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 但弹出窗口从未显示。
感谢任何帮助,提前致谢。
如果您要创建动态弹出窗口,则需要委托它们。
尝试:
$( 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 );
} );
}
}