Question

我正在使用twitter bootstrap在社交媒体上分享我的帖子，我已经创建了一个带有一些按钮内容的popover链接，但是当我点击popover中的按钮时，他们的popover功能不起作用。

<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>

<div class='container hide' id='cont'>
     <a onclick="Facebook()"
        class="btn btn-default">
        Facebook 
        </a>
         <a onclick="twitter()"
        class="btn btn-default">
        Twitter 
        </a>
         <a class="btn btn-default"
        data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
        type="button" data-html="true" href="#" id="login">
        Email 
        </a>
</div>

<div id="popover-content" class="hide">
      <form class="form-inline" role="form">
        <div class="form-group">
          <input type="text" placeholder="Name" class="form-control" maxlength="5">
          <button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>                                  
        </div>
      </form>
    </div>

和js

$('#but1').popover({
    html: true,
    content: $('#cont').html()
});


$("[data-toggle=popover]").popover({
    html: true, 
    content: function() {
          return $('#popover-content').html();
        }
});

function Facebook(){
    alert('share on facebook');
}
function twitter(){
    alert('share on twitter');
}

function EmailToSomeOne(){
 alert('Email to send');   
}

为了更多清算，我也创建了fiddle。

Answer 1

您只需使用ID

绑定按钮即可

<a id="Facebook"class="btn btn-default">Facebook </a>

并使用

访问它

$("#Facebook").on('click',function(){
    alert('share on facebook');
})

编辑：你不能在bootstrap中使用嵌套的popover。但是你可以使用以下两种方法 1）您可以更改弹出窗口中的html并显示您的电子邮件表单

$('.popover-content').html($('#emailform').html())

请参阅此appproach附带的小提琴

https://jsfiddle.net/mohit181191/mxstLfnf/

2）你可以点击弹出式按钮打开一个模态。

<a data-toggle="modal" data-target="#facebook"
    class="btn btn-default">

请参阅以下小提琴，了解此方法

http://jsfiddle.net/mohit181191/o35zqy7w/

Answer 2

您的代码运行正常。它只是一个jsFiddle设置问题。

在你的小提琴中，选择左侧下拉列表中的 no wrap（head），单击“运行”，它将起作用。

See example

当选择onLoad时，你的函数在$（document）.ready（function（）{}）的闭包中定义;只要。这就是它显示错误Uncaught ReferenceError: Facebook is not defined的原因（参见控制台）

BTW，这是关于plunkr enter link description here

的等效示例

Answer 3

Bootstrap不支持嵌套弹出窗口 http://getbootstrap.com/javascript/#modals

Answer 4

使用此：

$('body').on('click',".btn-default", function(){
   alert('share on facebook');
});

.btn-default 将此更改为您的按钮默认ID

Bootstrap Popover Inside Popover无效

4 个答案: