javascript - 如何将新的 HTML 添加到动态创建的弹出窗口 (Bootstrap 3)

Question

使用 Bootstrap 3，我尝试将新的 HTML 元素添加到动态弹出窗口中，例如

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

但是它不起作用!我该如何解决这个问题？

$("[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>

Answer 1

据我所知，您正在获取当前隐藏的现有 #popover-content 元素上的弹出内容。

然后，当它生成弹出窗口的内容时，它会创建另一个 #result 元素。这里的问题是，当您有 2 个或更多具有相同 id 的元素并在选择器上使用该 id 时，它仅针对使用该 id 找到的第一个元素。

因此，不要在元素上使用 id，而是使用 class。并确保仅定位弹出窗口内的类。

例如

HTML

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

JS

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

Fiddle