Question

我正在尝试关注示例here并创建一个popover表行。当我只是复制代码时，它就像一个魅力。但是在我希望弹出窗口工作的表中，它失败了。

我有以下JavaScript代码（与Fiddle相同）：

// Popover

var options = { placement: 'bottom', trigger: 'manual', html: true, title: 'This row' };

function createPopover(element, args) {
    var href = $(element).data('popover-url'), txt = $(element).data('popover-content');
    var html = '<p>Challenge: Can you click the link in a popover?</p><p><a href="' + href 
+ '">' + txt + '</a></p>';

    $(element).data('content', html).popover(args);
}

function popoverPlacementBottom() {
    createPopover($(this), options);
}

$('.row').each(popoverPlacementBottom);

var insidePopover = false;

function attachEvents(tr) {
    $('.popover').on('mouseenter', function () {
        insidePopover = true;
    });
    $('.popover').on('mouseleave', function () {
        insidePopover = false;
        $(tr).popover('hide');
    });
}

$('table').on('mouseenter', 'tr', function () {
    var tr = $(this);
    setTimeout(function () {
        if (!insidePopover) {
            $(tr).popover('show');
            attachEvents(tr);
        }
    }, 200);
});

$('table').on('mouseleave', 'tr', function () {
    var tr = $(this);
    setTimeout(function () {
        if (!insidePopover) $(tr).popover('hide');
    }, 200);
});

并尝试在此表上使用popovers：

<table class="table table-condensed scrollable popup">
<thead>
  <tbody id="logEvents">
    <tr class="row" data-popover-url="#url_for_row_1" data-popover-content="line 1" data-
         original-title="" title="">
      <td class="col-md-1">18:27</td>
      <td class="col-md-5">InfoService</td>
      <td>Blabla...</td>
     </tr>
  </tbody>
 </table>

然而，这不起作用。虽然它在下面的表格中起作用，但看起来像这样：

<table class="popup">
<tbody>
  <tr class="row" data-popover-url="#url_for_row_1" data-popover-content="line 1" data-original-         title="" title="">
    <td>the first line</td>
  </tr>
  </tbody>
</table>

为什么它不起作用呢？我希望有人可以帮助我。

/编辑好吧，我制作了自己的小提琴HERE。

奇怪的是，代码在小提琴中起作用。但在我的网页上却没有。与Fiddle的唯一区别在于，每当事件发生时，动态生成tr行：

return "<tr " + trClass + " data-popover-content='line 1' data-popover-url='#url_for_row_1'>"
                + "<td class='col-md-1'>" + time + "</td>"
                + "<td class='col-md-5'>" + item.Source + "</td>"
        +  "<td>" + item.DescriptionShort + "</td>"


               // + "<td class='col-md-6'>" + "<a id='pop' data-content='test' data-          
              toggle='popover'>" + item.DescriptionShort + "</a></td>"
                + "</tr>";

这与它有什么关系吗？（例如，id和类在文档准备好之后？并且我每次发生新事件时都需要重新分配类？如果是，那么如何？

Answer 1

好的问题出现在生成的代码中！每次发生事件时都会生成<tr>，因此我不应仅在文档就绪时分配popover事件，而且每次创建新行时都不应分配。{/ p>

我将popover（）函数放在他自己的pop命名空间中，并在新事件创建新行后添加了pop.popOver（）。看起来如下：

 this.addData = function (item) {
       var container = $(this.cId);
    container.append(this.getEventHtml(item));
    pop.popOver();
}

现在弹出窗口显示！ YEAH！感谢Suman Bogati的帮助。

为什么我不能在我希望它工作的表格中使引导程序popover工作？

1 个答案: