Bootstrap Popover Inside Popover не работает

Question

Я использую twitter bootstrap, чтобы разделить мое сообщение в социальных сетях, я создал ссылку, чье поп-контент с содержимым некоторых кнопок, но еще дальше, когда я нажимаю кнопки в 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

Bootstrap не поддерживает вложенную поповер http://getbootstrap.com/javascript/#modals

Answer 2

Вы можете просто связать кнопки с идентификатором, как

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

и доступ к нему с помощью

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

EDIT: Вы не можете иметь вложенное popover в bootstrap. Однако вы можете использовать следующие два подхода: 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 3

Используйте это:

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

.btn-умолчанию изменить это ваш идентификатор кнопки по умолчанию

Answer 4

Ваш код работает нормально. Это просто проблема настройки jsFiddle.

В вашей скрипке выберите no wrap (head) в выпадающем меню слева, нажмите «Выполнить», и он будет работать.

See example

Когда OnLoad выбран ваши функции определены в замыкании $ (документ) .ready (функция() {}); только. Вот причина это показывает ошибку Uncaught ReferenceError: Facebook is not defined (см консоли)

Кстати, вот эквивалентный пример на plunkr enter link description here