CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrappopover
Eugene Sukh
Eugene Sukh

Reputation: 2737

Click in popover not working

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?

Upvotes: 1

Views: 2713

Answers (4)

Milad Jafari
Milad Jafari

Reputation: 975

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object, I change class selector to document for binding event to element

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

Upvotes: -1

anomepani
anomepani

Reputation: 1846

There is an issue with selector 'popover-body' which may not exist. Take a look at 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);
  });

Upvotes: 0

user9019817
user9019817

Reputation:

The issue seems to be with the selector. In the source code when the popup was open I couldn't see the class popover-body. This should work though:

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 2

Related Questions