Bootstrap Popover内onclick事件失效问题排查问询

我帮你分析代码里的两个核心问题，这就是导致按钮点击没反应的根源：

问题1：点击事件绑定方式错误 #

你现在写的代码里有个明显的小失误：

inbox.onclick = inbox_open();

这里的inbox_open()是立即执行函数——页面一加载就会跑一遍这个函数，而不是把它绑定成点击按钮的回调。正确的写法应该去掉括号，把函数本身赋值给onclick：

inbox.onclick = inbox_open;
// 或者用更规范的addEventListener写法：
// inbox.addEventListener('click', inbox_open);

问题2：Popover标题赋值丢失了事件监听器 #

你通过inbox.setAttribute("title", poH.innerHTML);把DOM元素poH转成纯HTML字符串赋值给title属性，但字符串形式的HTML不会保留原来DOM元素上绑定的onclick事件——因为事件监听器是属于DOM对象的，不是HTML文本的一部分。

正确的做法是直接把poH这个DOM元素作为Popover的标题内容，利用Bootstrap Popover的API动态更新，而不是修改title属性。

修改后的完整代码 #

JavaScript部分 #

// 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() {
    // 每次点击先清空poH，避免重复添加按钮
    poH.innerHTML = '';
    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);
    }
    // 用Bootstrap Popover的API更新标题，直接传入DOM元素
    $('#inbox').popover('dispose').popover({
        title: poH,
        placement: 'left',
        html: true,
        content: '' // 这里可以保留原有的content，或者按需修改
    }).popover('show');
}

// 修复事件绑定，不再立即执行函数
inbox.addEventListener('click', inbox_open);

// 初始化Bootstrap Popover
$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

HTML部分 #

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

关键修改说明 #

1. 修复事件绑定：把inbox_open()改成inbox_open，确保只有点击按钮时才触发函数
2. 动态更新Popover：用$('#inbox').popover('dispose')先销毁旧的popover实例，再重新初始化并传入poH作为标题，这样DOM元素的事件监听器会被完整保留
3. 清空重复内容：每次执行inbox_open时先清空poH，避免多次点击后按钮重复出现

这样调整后，popover里的按钮点击就能正常打印日志了。

内容的提问来源于stack exchange，提问作者S4UR000N