我有一个 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 函数,如果我将其传递到表格单元格中的 URL,该函数将动态创建(如果它尚不存在)并打开 bootstrap 2.32 弹出窗口。到目前为止我已经:
$('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>
在我的表格下方,这正在使用创建的弹出窗口。
这似乎是一个已知问题,例如 Twitter Bootstrap Popovers not working for Dynamically Generated Content 。我怎样才能让它在我的情况下工作?
最佳答案
您没有创建正确的选择器来绑定(bind)弹出窗口。
当你有:
$(this.innerHTML ).popover("show");
与书写相同
$('<a href="myreference.html" ....</a>').popover("show");
jQuery 无法将该字符串与任何 DOM 元素相匹配。该字符串不在 DOM 中。
您需要使用适当的选择器并遍历到目标,例如:
$(this).find('a');
或者,如果您从字符串创建一个 jQuery 对象,并使用像 html()
这样的 jQuery 方法来插入它,您可以使用新形成的 jQuery 对象将插件绑定(bind)到 jQuery 对象之后已插入
var $link = $('<a href="myreference.html" ....</a>');
$(this).html($link);
$link.popover("show");
关于javascript - 如何使用 jquery 触发动态创建的 bootstrap popover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28113643/