javascript - 如何在鼠标悬停事件上触发 Bootstrap 弹出窗口

Question

我有一个 html 表格，其中一行看起来像:

<tr>
    <td><input type="checkbox" name="check[]" value="265"></td>   
    <td>265</td>
    <td>NO MATCH</td>
    <td>http://stackoverflow.com/</td>
    <td>No</td>
    <td>0</td>
    <td>f79a8316891</td>
  </tr>

我正在尝试构建一个 jquery 函数，如果我通过表格单元格中的 URL 传递它，它将打开一个 bootstrap 2.32 弹出窗口。到目前为止，我有:

    $("[data-bind='popover']").popover({
         trigger: 'hover',
         html: true,
         content: function(){ 
          return $(this).data('content');
         }
        });



        $('td').on('mouseover', function(e) {
            var contents = $( this ).html() ;

            if (contents.match("^http")) {
                console.log(contents);

                 this.innerHTML = '<a href="myreference.html" data-bind="popover"' + ' data-content="'+contents +'"> link </a>';
                 console.log(this.innerHTML);

            }
        });

它的弹出框部分基于 http://jsfiddle.net/8DP4T/1/

当我将鼠标悬停在表中的 url 上时，它会按预期形成弹出链接。但是，当我将鼠标悬停在它上面时，据我所知，没有弹出窗口出现。该代码确实有效，但它没有触发弹出窗口。

有趣的是，我还放置了

<a href="myreference.html" data-bind="popover data-content="http://upload.wikimedia.org/wikipedia/commons/a/a5/Flower_poster_2.jpg">Brick</a> 

在我的 table 下面，这正在使用创建的弹出窗口。我想知道此行为是否与操作顺序有关，因为弹出链接是在 DOM 设置后动态创建的。有人可以在这里给我建议吗？

Answer 1

Bootstrap 弹出窗口的默认触发器是“点击”事件。你在这里定义的是“在鼠标悬停时，检查我鼠标下的内容是否是一个链接，如果是，定义一个弹出窗口”，但你的问题是你从未触发弹出窗口打开，你只是定义了它这样，如果单击它，它就会打开。

改变这个...

$('.popover-markup').popover(...)

为此...

$(this).popover(...)

这样“”就变成了弹出窗口(我不是 100% 确定您可以将 定义为弹出窗口，但它似乎应该可以工作)。然后，在您定义弹出窗口选项的代码之后，您可以立即触发“点击”事件，或者您可以通过发送“显示”命令触发它打开。最后，您可以通过在定义弹出窗口时将“trigger”:“hover”添加到您的选项列表来触发它打开...这将在用户不再将鼠标悬停在 td 元素上后自动隐藏它。

//Trigger click
$(this).trigger("click");

//Trigger popover open (probably the better way)
$(this).popover("show");

//Trigger on hover
$(this).popover({
    ...
    trigger: 'hover',
});

所以总的来说......

$('td').on('mouseover', function(e) {
     var contents = $( this ).html() ;

    if (contents.match("^http")) {
       $(this).popover({
            html : true,
            title: function() {
              return $(this).parent().find('.head').html();
            },
            content: function() {
              return $(this).parent().find('.content').html();
            },
            container: 'body',
            placement: 'bottom'
        });

        // Trigger the popover to open
        $(this).popover("show");
    }
});