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 popover。到目前为止，我有：

    $("[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/

当我鼠标悬停在表格中的网址时，它会按预期形成一个弹出链接。但是当我把鼠标放在它上面时，就我所见，没有弹出窗口。代码确实有效，但它不会触发弹出窗口。

有趣的是，我也放置了

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

在我的表下面，这是在创建一个popover。我想知道这种行为是否与操作顺序有关，因为弹出链接是在DOM已经设置之后动态创建的。有人可以在这里建议我吗？

Answer 1

您需要添加

触发：＆＃39; hover＆＃39;

到选项对象，如下所示：

＆＃13;

$('.popover-markup > .trigger').popover({
        html : true,
        title: function() {
          return $(this).parent().find('.head').html();
        },
        content: function() {
          return $(this).parent().find('.content').html();
        },
        container: 'body',
        placement: 'bottom',
        trigger: 'hover'
    });

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="popover-markup">
  <a href="#" class="trigger">
    This link triggers the popover.
  </a>
  <div class="head hide">
    This is the popover title.
   </div>
  <div class="content hide">
    <p>This is the popover content.</p>
  </div>
</div>

＆＃13;

Answer 2

引导程序弹出窗口的默认触发器是“单击”事件。你在这里定义的是“在鼠标悬停时，检查鼠标下的内容是否是链接，如果是，请定义一个弹出框”，但问题是你从未触发弹出窗口打开，你只是定义了它所以，如果它点击它将打开。

改变这个......

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

对此...

$(this).popover(...)

这样“＆lt; td＆gt;”成为popover（我不是100％肯定你可以将＆lt; td＆gt;定义为popover，但它似乎应该可以工作）。然后，在定义弹出框选项的代码之后，您可以立即触发“单击”事件，或者可以通过发送“show”命令触发它以打开它。最后，您可以通过在定义弹出窗口时将“触发器”：“悬停”添加到选项列表来触发它打开...在用户不再悬停在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");
    }
});

如何在mouseover事件上触发引导弹出窗口

2 个答案: