bootstrap popover链接不起泡 [英] bootstrap popover links does not bubble up

问题描述

我有一个popover如下


在JS和HTML端我有以下，

I have a Popover as follows
On JS and HTML Side I have the following,

$('.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>

感谢您

推荐答案

这将帮助您 DEMO

This will help you 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链接不起泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！