当我点击 ID 为 small-text 的 anchor 标记时，我尝试发出警报。
该元素位于 Bootstrap 弹出窗口内。但是，当我将其删除并将其放在弹出窗口之外的任何位置时，每当我单击该链接时，警报就会开始工作。
我不知道发生了什么。
演示 https://jsfiddle.net/08sa99uk/4/
HTML
<div class="article-links">
<span class="font">
<a href="#"
data-container="body"
data-toggle="popover"
data-html="true">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
<a href="#nogo" id="small-text">S</a>
</span>
</span>
</div>
Javascript
// This is the function that allows me to use an external div for the popover content
$('.font a').on('click', function(e) {e.preventDefault(); return true; }).popover({
html: true,
placement: 'bottom',
content: function() {
return $('.font-size').html();
}
});
$('a#small-text').on('click', function() {
alert('clicked');
});
最佳答案
问题在于渲染 DOM 时相关元素不存在。如果您检查渲染的弹出窗口(通常在浏览器中按 F12 或右键单击并检查元素)，则 Bootstrap 正在创建，它会复制您的模板并将其附加到弹出包装器内的 DOM:
<div class="popover fade bottom in" role="tooltip" id="popover192086" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
<a href="#nogo" id="small-text" data-original-title="" title="">S</a>
</div>
</div>
由于发生这种情况，您需要委托(delegate)第二个点击事件:
$(document).on('click', 'a#small-text', function() {
alert('clicked');
});
<强> DEMO
注意:应该注意的是，在文档级别进行委派效率很低。您需要将上面代码中的 document 替换为初始化之前 DOM 中存在的最接近的父代码。
编辑:
关于下面关于委托(delegate)不能与 span.font 一起使用的最新评论，以下是 Bootstrap 创建的完全渲染的 DOM 布局:
<body>
<!-- Your original code -->
<div class="article-links">
<span class="font">
<a href="#" data-container="body" data-toggle="popover" data-html="true" data-original-title="" title="" aria-describedby="popover186211">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
<a href="#nogo" id="small-text" data-original-title="" title="">S</a>
</span>
</span>
</div>
<!-- Bootstrap added code -->
<div class="popover fade bottom in" role="tooltip" id="popover186211" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
<a href="#nogo" id="small-text" data-original-title="" title="">S</a>
</div>
</div>
</body>
请注意，在 Bootstrap 呈现的代码中，没有 span.font。 UI 库倾向于提取用户创建的模板，然后添加额外的代码以使它们以所需的方式执行。在这种情况下，您必须将委托(delegate)代码添加到下一个外部元素(可能是 body)。对于您的用例，使用 document 一次可能就可以了。不过我不会养成这种习惯。
关于javascript - 无法获取嵌套在 jQuery 中的 Bootstrap 弹出窗口中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43874844/