Question

我有一个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>

但是当我尝试点击这些链接时，他们现在可以用作链接。他们只是处理链接普通文本。对此有什么想法吗？

谢谢你

Answer 1

不，

问题是当点击或悬停某些东西时，popover会被插入到DOM中。

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

Answer 2

这将有助于您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);
    });

});

bootstrap popover链接不会冒泡

2 个答案: