Bootstrap Popover Inside Popover不工作

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.However中嵌套弹出窗口，您可以使用以下两种方法1)您可以更改弹出窗口内的html并显示您的电子邮件表单

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

请参阅此方法所附的小提琴

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)，单击Run，它将正常工作。

See example

选择onLoad时，您的函数仅在$(Document).ready(.ready() {})；的闭包中定义。这就是它显示错误Uncaught ReferenceError: Facebook is not defined的原因(参见控制台)

顺便说一句，这里有一个关于enter link description here的等效示例

Answer 3

引导不支持嵌套的popover http://getbootstrap.com/javascript/#modals