Question

我放弃了Bootstrap popover，然后继续寻找。我发现WebUI Popover具有我正在寻找的所有功能。

但是我无法使用页面上元素的html内容设置popover的标题。我在undefined中获得console.log()，标题加载为空。我试图访问的html是动态创建的。

我认为插件中存在一个错误，即内容从页面上的其他元素完全加载。

我的WebUI Popover代码是：

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

感谢任何帮助。

Answer 1

title: function() { return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html(); },

这很好用。通过执行$(this)，您尝试访问显然没有最近td.row-icon的popover的title元素。因此它是未定义的。

WebUI Popover无法使用html元素设置标题

1 个答案: