событие onclick внутри попсового загрузчика

Question

При нажатии кнопки Входящие запускается функция inbox_open () и в заголовке папки «Входящие» появляются 3 кнопки, но прослушиватель событий onclick отсутствует. Проверьте код после // inbox.open комментария, критические строки: b.onclick = function() { console.log("button was clicked"); } и inbox.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>

Answer 1

Проблема в том, что функция onclick не привязана к кнопкам, просто из-за того, как работают Popovers Bootstrap. Вы можете добавить следующие несколько строк, чтобы добавить слушателя onclick, когда кнопки станут видимыми:

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

});

Просто добавьте вышеуказанное после строки $ (document) .ready (...).