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 ment, 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=".3.1/jquery.min.js"></script>
<script src=".js/1.14.0/umd/popper.min.js"></script>
<script src=".1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href=".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>

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 ment, 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

• javascript
• jquery
• css
• html
• bootstrap-4

• And what is your problem my friend? How to help you? – Michael W. Czechowski Commented May 11, 2018 at 18:33

2 Answers 2

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 bee 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.

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>