单击弹出窗口不起作用

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

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

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

$("[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>

Answer 2

问题似乎与选择器有关。在弹出窗口打开时的源代码中，我看不到 class popover-body。不过这应该有效：

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

$('body').on('click', '.popover-content 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 3

选择器 'popover-body' 存在问题，该问题可能不存在。看看 JsFiddle：https://jsfiddle.net/xe54r7db/37/

    $("[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();
    }
  });
  //Register with document parent selector to attach event.
  $(document).on('click','.popover-content a',function(e){
 // e.preventDefault();
    let lang = $(this).data("lang")
    alert(lang);
  });

Answer 4

.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的一组元素，我将 class 选择器更改为用于将事件绑定到元素的文档

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

单击弹出窗口不起作用

Click in popover not working

javascript

jquery

twitter-bootstrap

popover