CODEWITHSUNDEEP
javascriptjquerycsshtmlbootstrap-4
S4UR000N
S4UR000N

Reputation: 83

onclick event inside bootstrap popover

When inbox button is clicked it runs inbox_open() function and in inbox header 3 buttons appear but onclick event listener is missing. Check code after // inbox.open comment, critical lines: b.onclick = function() { console.log("button was clicked"); } andinbox.setAttribute("title", poH.innerHTML);

// inbox
var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");

var poH = document.createElement("span");
var poC = document.createElement("span");

var new_from_to = [0, 2, 3];
var number_of_news = [2, 1, 2];
var news_price_data = [10, 20, 30, 40, 50];

// inbox.open
function inbox_open() {
  for (var i = 0; i < number_of_news.length; i++) {
    var b = document.createElement("button");
    b.innerHTML = (i + 1);
    b.className = "poH";
    b.onclick = function() {
      console.log("button clicked");
    }
    poH.appendChild(b);
  }
  inbox.setAttribute("title", poH.innerHTML);
}

// inbox.addEventListener
inbox.onclick = inbox_open();

// aloud BS 4 popover to run
$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- HTML -->
<button id="inbox" class="btn btn-primary btn-sm" style="float: right; margin: 30px 30px 0 0;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox <span id="inbox_news"></span></button>

Upvotes: 5

Views: 8373

Answers (2)

Sunny_Sid
Sunny_Sid

Reputation: 411

Bootstrap prevents onclick event on popover content of any element. So when you find the event of shown.bs.popover and try to bind an onclick it also try to prevent the click behavior of that element. below is the code which can help you fire the popover content's onclick event:

var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");

var poH = document.createElement("span");
var poC = document.createElement("span");

var new_from_to = [0, 2, 3];
var number_of_news = [2, 1, 2];
var news_price_data = [10, 20, 30, 40, 50];

// inbox.open
function inbox_open() {
  for (var i = 0; i < number_of_news.length; i++) {
    var b = document.createElement("button");
    b.innerHTML = (i + 1);
    b.className = "poH";
    b.click = function() {
      console.log("button clicked");
    }
    poH.appendChild(b);
  }
  inbox.setAttribute("title", poH.innerHTML);
}

// inbox.addEventListener
inbox.onclick = inbox_open();

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
  
  $('#inbox').on('shown.bs.popover', function () {
    for (var i=0; i < $('.poH').length; i++) {
        $('.poH')[i].onclick = function() { alert($(this).text()); };
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- HTML -->
<button id="inbox" class="btn btn-primary btn-sm" style="float: right; margin: 30px 30px 0 0;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox <span id="inbox_news"></span></button>

Upvotes: 0

rby
rby

Reputation: 786

The problem is that the onclick function is not being bound to the buttons, simply because of the way Bootstrap's Popovers work. You can add the following few lines to add the onclick listener when the buttons become visible:

$('#inbox').on('shown.bs.popover', function () {

    var btns = document.getElementsByClassName("poH");
    for (var i=0; i < btns.length; i++) {
        btns[i].onclick = function() { console.log("shit"); };
    }

});

Just add the above after your $(document).ready(...) line.

Upvotes: 6

Related Questions