Question

点击标识为small-text的锚标记时，我正在尝试提醒。

该元素位于Bootstrap弹出框内。但是，当我将其删除并将其放在弹出框之外的任何位置时，只要我点击链接，警报就会开始工作。

我不知道发生了什么。

DEMO 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');
});

Answer 1

问题是在呈现DOM时，有问题的元素不存在。如果您检查渲染的弹出窗口（通常是浏览器中的 F12 或右键单击 Inspect Element ）， 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>

由于发生这种情况，您需要委派第二次点击事件：

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

<强> DEMO

注意：应注意，document级别的委派效率低下。您需要将上面代码中的document替换为初始化之前DOM中最近的父代码。

修改

关于下面关于不使用span.font的代表团的最新评论，这里是 Bootstrap 创建的完全呈现的DOM布局：

<body>  <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>  <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库倾向于提取用户创建的模板，然后添加其他代码以使它们以所需的方式执行。在这种情况下，您必须将委托代码添加到下一个外部元素，可能是body。对于您的用例，使用document一次可能很好。我不会养成这个习惯。

无法在jQuery中将元素嵌套在Boostrap popover中

1 个答案: