弹出窗口内的引导弹出窗口不起作用答案

【问题标题】：Bootstrap Popover Inside Popover not working弹出窗口内的引导弹出窗口不起作用
【发布时间】：2015-06-20 11:41:12
【问题描述】：

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

<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。

【问题讨论】：

标签： javascript jquery ios twitter-bootstrap popover

【解决方案1】：

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

在您的小提琴中，在左侧的下拉菜单中选择 no wrap (head)，点击 Run 即可。

See example

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

顺便说一句，这是 plunkrenter link description here 上的等效示例

【讨论】：

【解决方案2】：

您可以简单地将按钮与 id 类似

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

并使用

访问它

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

编辑：您不能在引导程序中嵌套弹出窗口。但是您可以使用以下两种方法 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/

【讨论】：

嵌套弹出在电子邮件按钮上
感谢您的锻炼，但我不需要弹出模型，我已经处理了它，因为不支持嵌套弹出框，所以它使两个弹出框分隔社交媒体并分享和电子邮件给朋友分享。
您是否检查了替换 html 的第一个方法？

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用这个：

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

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

【讨论】：