javascript - Bootstrap Popover Inside Popover not working - Stack Overflow

admin管理员组

文章数量:1404927

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.

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.

• javascript
• jquery
• ios
• twitter-bootstrap
• popover

Share Improve this question Follow asked Jun 20, 2015 at 11:41 Muhammad TaqiMuhammad Taqi 5,42477 gold badges3838 silver badges6565 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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 plunkrenter link description here

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/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/mohit181191/o35zqy7w/

Bootstrap not support the Nested popover http://getbootstrap./javascript/#modals

Use this :

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

.btn-default change this to your button default id

本文标签： javascriptBootstrap Popover Inside Popover not workingStack Overflow