Javascript Can'；无法在jQuery中获取嵌套在Boostrap popover中的元素_Javascript_Jquery_Html_Twitter Bootstrap

Javascript Can'；无法在jQuery中获取嵌套在Boostrap popover中的元素

javascript jquery html twitter-bootstrap

Javascript Can'；无法在jQuery中获取嵌套在Boostrap popover中的元素,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我试图在单击id为小文本的锚定标记时发出警报该元素位于引导popover中。但是，当我将其移除并放置在popover之外的任何位置时，只要我单击链接，警报就会开始工作我不知道发生了什么事演示 HTML 问题在于，呈现DOM时，相关元素不存在。如果检查呈现的弹出窗口（通常是浏览器中的F12或右键单击并检查元素），则该引导程序正在创建，它正在复制模板并将其附加到弹出包装器内的DOM中： <div class="popover fade bottom in" role="tooltip"

我试图在单击id为

小文本的锚定标记时发出警报
该元素位于引导popover中。但是，当我将其移除并放置在popover之外的任何位置时，只要我单击链接，警报就会开始工作
我不知道发生了什么事
演示
HTML
问题在于，呈现DOM时，相关元素不存在。如果检查呈现的弹出窗口（通常是浏览器中的F12或右键单击并检查元素），则该引导程序正在创建，它正在复制模板并将其附加到弹出包装器内的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>


注意：应该注意的是，文档
级别的授权效率低下。在初始化之前，您需要将上面代码中的文档
替换为DOM中最接近的父代码
编辑：
关于下面关于委托不使用span.font
的最新评论，以下是Bootstrap创建的完全呈现的DOM布局：


请注意，在引导呈现的代码中，没有span.font
。UI库倾向于提取用户创建的模板，然后添加额外的代码，使它们以所需的方式执行。在这种情况下，您必须将委派代码添加到下一个外部元素，可能是body
。对于您的用例，使用document
这一次可能没问题。不过，我不会养成这样的习惯。
问题是，在呈现DOM时，所讨论的元素不存在。如果检查呈现的弹出窗口（通常是浏览器中的F12或右键单击并检查元素），则该引导程序正在创建，它正在复制模板并将其附加到弹出包装器内的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>


注意：应该注意的是，文档
级别的授权效率低下。在初始化之前，您需要将上面代码中的文档
替换为DOM中最接近的父代码
编辑：
关于下面关于委托不使用span.font
的最新评论，以下是Bootstrap创建的完全呈现的DOM布局：


请注意，在引导呈现的代码中，没有span.font
。UI库倾向于提取用户创建的模板，然后添加额外的代码，使它们以所需的方式执行。在这种情况下，您必须将委派代码添加到下一个外部元素，可能是body
。对于您的用例，使用document
这一次可能没问题。不过我不会养成这样的习惯。
你比我强！aghhhIt可以处理文档
，但我无法让它处理最近的父元素，即span.font
@Halnex Awesome！祝你好运和快乐：）你赢了我！aghhhIt可以处理文档
，但我无法让它处理最近的父元素，即span.font@Halnex Awesome！祝你好运和快乐：）
<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>

$(document).on('click', 'a#small-text', function() {
    alert('clicked');
});

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