Bootstrap Popover Inside Popover not working

Question

I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.

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

and the 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');   
}

for more clearing i have created a fiddle also.

Answer 1

You can simply bind the buttons with an id like

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

and access it using

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

EDIT: You cannot have nested popover in bootstrap.However you can use the below two approaches 1)You can change the html inside the popover and display your email form

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

Please refer to the fiddle attached for this appproach

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

2)You can open a modal on popover button click.

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

Please refer to the below fiddle for this approach

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

Answer 2

Your code works fine. Its just a jsFiddle setting issue.

In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.

See example

When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)

BTW, here's an equivalent example on plunkr enter link description here

Answer 3

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

Answer 4

Use this :

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

.btn-default change this to your button default id