javascript - 单击弹出窗口不起作用

Question

我尝试在 a 标签上的 click 事件后获取 data-lang 值，代码如下:

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    var content = $(this).attr("data-popover-content");
    return $(content).children(".popover-body").html();
  },
  title: function() {
    var title = $(this).attr("data-popover-content");
    return $(title).children(".popover-heading").html();
  }
});

$('.popover-body').on('click', 'a', function() {
  let lang = $(this).data("lang")
  alert(lang);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="mainnav">
  <ul class="topnav">
    <a href="#" data-toggle="popover" data-popover-content="#a1">Popover</a>
  </ul>
</nav>
<div id="a1" class="hidden">
  <div class="popover-heading">_('Välj ditt språk')</div>
  <div class="popover-body">
    <div class="lang">
      <a href="#" data-lang="no">Norsk</a>
    </div>
    <div>
      <a href="#" data-lang="de">Deutsch</a>
    </div>
    <div>
      <a href="#" data-lang="nl">Nederlands</a>
    </div>
    <div>
      <a href="#" data-lang="es">Español</a>
    </div>
    <div>
      <a href="#" data-lang="dk">Dansk</a>
    </div>
  </div>
</div>

但是当我点击它时，没有任何反应。
我该如何解决这个问题？

Answer 1

问题是因为尽管您使用的是委托(delegate)事件处理程序，这是此问题的正确解决方案，但 .popover-body 元素并未与弹出窗口的内容一起被克隆插件。如果您在打开弹出窗口后检查 DOM 中的元素，就会看到这一点。

要解决此问题，您可以使用 .mainnav 元素作为委托(delegate)事件处理程序的主要选择器:

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    var content = $(this).attr("data-popover-content");
    return $(content).children(".popover-body").html();
  },
  title: function() {
    var title = $(this).attr("data-popover-content");
    return $(title).children(".popover-heading").html();
  }
});

$('.mainnav').on('click', '.topnav div a', function() { // change this
  let lang = $(this).data("lang")
  console.log(lang);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="mainnav">
  <ul class="topnav">
    <a href="#" data-toggle="popover" data-popover-content="#a1">Popover</a>
  </ul>
</nav>
<div id="a1" class="hidden">
  <div class="popover-heading">_('Välj ditt språk')</div>
  <div class="popover-body">
    <div class="lang">
      <a href="#" data-lang="no">Norsk</a>
    </div>
    <div>
      <a href="#" data-lang="de">Deutsch</a>
    </div>
    <div>
      <a href="#" data-lang="nl">Nederlands</a>
    </div>
    <div>
      <a href="#" data-lang="es">Español</a>
    </div>
    <div>
      <a href="#" data-lang="dk">Dansk</a>
    </div>
  </div>
</div>