Click in popover not working

Question

I try to get data-lang value after click event on an a tag with this code:

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

But when I click it, nothing happens.
How can I fix this?

Answer 1

The issue is because although you're using a delegated event handler, which is the correct solution to this problem, the .popover-body element is not cloned along with the content of the popover by the plugin. You can see this if you inspect the elements in the DOM after you open the popover.

To fix this you can use the .mainnav element as the primary selector of your delegated event handler:

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