javascript - bootstrap popover 中的 onclick 事件

Question

当 inbox 按钮被点击时，它运行 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 函数没有绑定(bind)到按钮，这仅仅是因为 Bootstrap 的 Popovers 的工作方式。您可以添加以下几行以在按钮可见时添加 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(...) 行之后添加以上内容。