引导弹出链接不会冒泡答案

【问题标题】：bootstrap popover links does not bubble up引导弹出链接不会冒泡
【发布时间】：2014-09-04 15:00:56
【问题描述】：

我有一个 Popover 如下
在 JS 和 HTML 方面，我有以下内容，

$('.profileShareBtn').popover({
        html : true,
        trigger: 'click',
        placement: 'bottom',
        // viewport: { selector: 'body', width: 300 },
        content: function() {
            return $('.socialSharePopupTemplate').html();
        }
    });


<div class="socialSharePopupTemplate">
     <span class="btn btn-default fa fa-times popoverCloseBtn pull-right"></span>
         <div class="social">
            <a class="col-xs-4 link facebook"><span class="fa fa-facebook"></span></a>
            <a class="col-xs-4 link twitter"><span class="fa fa-twitter"></span></a>
            <a class="col-xs-4 link google-plus"><span class="fa fa-google-plus"></span></a>
          </div>
</div>

<button class="profileShareBtn></button>

但是当我尝试点击这些链接时，它们现在可以作为链接使用。他们只是充当链接普通文本。请问有什么想法吗？

谢谢你

【问题讨论】：

使用$(document).ready(function(){ //insert your code here });。此外，您粘贴的html 代码在class="profileShareBtn'here'></button> 之后缺少"
No No，问题是当单击或悬停某些内容时，弹出框会插入到 DOM 中。因此，当这种情况发生时，链接不会被初始化。这就是为什么我什至无法处理弹出内容上的事件。你知道我的意思吗？
这是我遇到的问题。查看链接无效jsfiddle.net/VUZhL/893
看到这个并尝试JSFIDDLE

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这将帮助你DEMO

<button class="profileShareBtn">Click me</button>

<div class="socialSharePopupTemplate" style="display:none">
    <span class="btn btn-default fa fa-times popoverCloseBtn pull-right">X</span>
    <div class="social">
        <a class="col-xs-4 link facebook" href="facebook" target="_blank">facebook</a>
        <a class="col-xs-4 link twitter" href="twitter">twitter</a>
        <a class="col-xs-4 link google-plus" href="http://www.google.com">google+</a>
    </div>
</div>

jQuery

$(document).ready(function(){

    $('.profileShareBtn').popover({ 
        html : true,
        placement:'bottom',
        content: function() {
            return $('.socialSharePopupTemplate').html();
        }
    });

    $( document ).delegate( ".link", "click", function(e) {
        e.preventDefault();
        var href = $(this).attr("href");
        alert(href);
    });

});

【讨论】：

哇哦。谢谢哥们。所以诀窍是将 eventlistner 附加到 DOM。使用 on 函数 jsfiddle.net/0v86k5pm/4 让它工作
@user3839915 是的，确实。您可以使用 on delegate 或 live 进行这些操作。谢谢！请投票

【解决方案2】：

不，不，

问题是当单击或悬停某些内容时，弹出框会插入到 DOM 中。

所以当这种情况发生时，链接不会被初始化。这就是为什么我什至无法使用 jquery 处理弹出内容上的事件。你懂我的意思吗？

【讨论】：