Question

使用bootstrap 3我试图将新的HTML元素添加到动态弹出框中，如

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

但它不起作用！你能告诉我怎么解决这个问题吗？谢谢

＆＃13;

$("[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>');
  });

＆＃13;

 .popover {
    max-width: 300px;
}

＆＃13;

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

＆＃13;

Answer 1

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

然后当它为popover生成内容时，它会创建另一个#result元素。这里的问题是当你有两个或多个具有相同id的元素并在选择器上使用id时，它只会找到使用该id找到的第一个元素。

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

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

无法向动态创建的Popover添加新HTML（Bootstrap 3）

1 个答案: