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函数没有绑定到按钮，仅仅是因为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"); };
    }

});

只需在$（文件）.ready（...）行之后添加上述内容。

bootstrap popover中的onclick事件

1 个答案: