Question

我有一个html表，其行如下所示：

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

我正在尝试构建一个动态创建的jquery函数（如果它不存在）并打开一个bootstrap 2.32 popover，如果我将它传递给表格单元格中的URL。到目前为止，我有：

       $('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);

            };

            // Trigger the popover to open
            console.log(this.innerHTML );
            $(this.innerHTML ).popover("show");


        });

此弹出窗口部分基于http://jsfiddle.net/8DP4T/1/

当我鼠标悬停在表格中的网址时，它会按预期形成一个弹出链接，如下所示：

<a href="myreference.html" data-bind="popover" data-content="https://stackoverflow.com/"> link </a>

然而，当我按住鼠标时，没有弹出窗口。

有趣的是，我也放置了

<a href="myreference.html" data-bind="popover" data-content="https://stackoverflow.com/">Brick</a>

在我的表下面，这是在创建一个popover。

这似乎是Twitter Bootstrap Popovers not working for Dynamically Generated Content等问题的已知问题。我怎样才能在我的案例中使用它？

Answer 1

您没有创建一个合适的选择器来将弹出窗口绑定到。

当你有：

$(this.innerHTML ).popover("show");

与写作相同

$('<a href="myreference.html" ....</a>').popover("show");

jQuery无法将该字符串与任何DOM元素相匹配。该字符串不在DOM中。

您需要使用正确的选择器并遍历目标，如：

 $(this).find('a');

或者你从字符串创建了一个jQuery对象，并使用像html()之类的jQuery方法来插入它，你可以使用新形成的jQuery对象将插件绑定到插入jQuery对象之后

var $link = $('<a href="myreference.html" ....</a>');
$(this).html($link);
$link.popover("show");

如何使用jquery触发动态创建的bootstrap popover

1 个答案: