Bootstrap Popover內部Popover無法正常工作

Question

我正在使用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');   
}

為了進行更多清除，我還創建了一個小提琴 。

Answer 1

您只需將按鈕與ID綁定即可，例如

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

並使用

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

編輯：您不能在bootstrap中嵌套popover。但是，您可以使用以下兩種方法1）您可以更改popover中的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”（頭部） ，然后單擊“ Run”（運行），它將起作用。

看例子

選擇onLoad時，您的函數在$（document）.ready（function（）{}）;的閉包中定義。 只要。 那就是它顯示錯誤Uncaught ReferenceError: Facebook is not defined的原因Uncaught ReferenceError: Facebook is not defined （請參閱控制台）

順便說一句，這是關於plunkr的等效示例在這里輸入鏈接描述

Answer 3

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

Answer 4

用這個 ：

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

.btn-default將此更改為您的按鈕默認ID