CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Behseini
Behseini

Reputation: 6330

How to add new HTML to dynamically created popover (Bootstrap 3)

Using Bootstrap 3 I am trying to add a new HTML element into a dynamic popover like

$(document).on('click', '#send-app', function(){
  console.log("Clicked!");
   $("#result").html('<p>New HTML Element</p>');
});

but it is not working! How can I fix this?

$("[data-toggle=popover]").popover({
    html: true, 
    content: function() {
          return $('#popover-content').html();
        }
});

 $(document).on('click', '#send-app', function(){
   console.log("Clicked!");
   $("#result").html('<p>New HTML Element</p>');
  });
 .popover {
    max-width: 300px;
}
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="wrap">
    <a data-placement="bottom" data-toggle="popover" data-container="body" role="button" data-html="true" href="#" id="login" class="btn btn-default">Send</a>
    <div id="popover-content" class="hide">
        <div class="well well-sm" style="margin-top:16px;  padding-top:14px; padding-bottom:0px;">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="input-group">
                        <input id="email" name="email" class="form-control" placeholder="Email" type="text">
                        <span class="btn input-group-addon" id="send-app">Send</span>
                        </div>
                        <p class="help-block animated"></p>
                    </div>
                <div id="result"></div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

Upvotes: 1

Views: 137

Answers (1)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13689

From what I see you are getting the content for the pop over on the existing #popover-content element which is currently hidden.

And then when it generates the content for the popover it creates another #result element. The problem here is that when you have 2 or more element with the same id and use that id on the selector it only targets the first element found with that id.

So instead of having an id on the element, use class instead. And make sure to target only that class inside the popover.

e.g.

HTML

<div class="result"></div>

JS

$(document).on('click', '#send-app', function() {
  console.log("Clicked!");
  $(".popover .result").html('<p>New HTML Element</p>');
});

Fiddle

Upvotes: 1

Related Questions