javascript - 引导弹出框内的 onclick 事件
问题描述
单击收件箱按钮时,它会运行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>
解决方案
问题是 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"); };
}
});
只需在 $(document).ready(...) 行之后添加以上内容。
推荐阅读
- reactjs - Gradle Jar 创建任务卡住了
- javascript - 如何在全局scss文件中实现绝对路径?VueJS
- maven - 用于 Scala 单例对象的 Jacoco 插件两次覆盖相同的类并创建覆盖率不足
- spring-boot - 如何模拟“流利”的 DataSourceHealthIndicator?
- f# - F# XmlProvider 和解析集合
- c# - Firebase 实时数据库,没有回报?
- php - 我想使用 PHP 将活动类添加到菜单和子菜单。我已将它添加到 ib 子菜单,但在主菜单上我遇到了问题
- php - 如何使用php在html中显示json数据的动态键和值
- python - 为什么抽象基类需要抽象方法?
- ios - 为什么我总是必须双击一个 UITab 栏项目?