0
我放棄了Bootstrap彈出窗口,並開始尋找。我找到了WebUI Popover,它具有我期待的所有功能。WebUI Popover無法使用html元素設置標題
但我無法使用頁面上元素的html內容設置彈出窗口的標題。我在console.log()
中獲得undefined
,標題加載爲空。我試圖訪問的html是動態創建的。
我認爲插件中存在一個錯誤是內容從頁面上的另一個元素完全加載。
我的Web用戶界面酥料餅的代碼是:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
我的HTML的樣品是:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
任何幫助表示讚賞。
嗨@Surya,表中有很多行從後端數據庫動態地收集。我無法將它指向課程,因爲它需要成爲當前行的一個。而且,相同的命令適用於身體。如果我使用身體的命令到標題上,它也是未定義的。 – TheRealPapa
各個按鈕的按鈕也不同嗎? – Surya
嗨@Surya,我只是更新了小提琴,以顯示如何多行。每行有不同的按鈕。爲什麼內容有效,而不是標題? – TheRealPapa