![](/img/trans.png)
[英]How can i close a bootstrap-popover with a button inside the popover?
[英]can we write script for the button which is inside the popover?
我创建了一个弹出窗口,因此,如果单击图像,则应该显示弹出窗口。
弹出窗口正在运行。 我的主要问题是我在弹出窗口中插入了按钮。
所以我想在单击按钮时为按钮编写JavaScript或jquery代码。 有人可以帮忙吗?
我已经尝试过,但是没有用!!!!
$(function() { $('button').click(function() { var x = $(this).attr('class'); alert(x); }); }); $(function() { $("[data-toggle=popover]").popover({ html: true, container: 'body', content: function() { var content = $(this).attr("data-popover-content"); return $(content).children(".popover-body").html(); }, title: function() { var title = $(this).attr("data-popover-content"); return $(title).children(".popover-heading").html(); }, placement: "auto" }); });
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="./isobar.js"> </script> <span> <img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions"> </span> <div id="moreoptions" class="hidden"> <div class="popover-body"> <div class="list-group"> <button type="button" class="list-group-item"><span class="gap"></span>Edit</button> <button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button> <button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button> </div> </div> </div>
好的,这是我的答案的更新版本,并检查并工作了。 弹出窗口的秘诀是在适当的时候通过弹出窗口触发来启动对应功能。 因此,JS代码为:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
在这里我使用HTML选择器
:not(.main)
防止绑定和取消绑定事件到主按钮。 另外,我们必须注意一个事实,即每次弹出的弹出窗口都会为每个按钮绑定一个新的事件处理程序。 这意味着在弹出窗口增加n次之后,每个按钮都会触发n次警告。 为了防止这种影响,可以仅在第一次上升时绑定事件,或者像我所做的那样,在每次弹出窗口上升时将事件与按钮解除绑定。 至于html代码,这里是:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
我只添加了“ .main”按钮以接受模拟,并且每个按钮都获得了额外的相应类“ class-0”,“ class-1”,“ class-2”,以进行成功的演示。 现在,当您按下主按钮时,将出现其他3个按钮。 相反,按下这3个按钮中的任何一个,都会紧接着触发并消失所有这些按钮。 我希望这能帮到您。
function firePopover() { $('.hidden').css('display', 'block'); var delay = 100; setTimeout(function () { $('button:not(.main)').unbind('click'); $('button:not(.main)').click(function () { var x = $(this).attr('class'); alert(x); $('.hidden').css('display', 'none'); }); }, delay); }
.hidden { display: none; } button { float: left; } .class-0 { clear: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button class="main" onclick="firePopover()">Fire Popover</button> <div id="moreoptions" class="hidden" hidden> <div class="popover-body"> <div class="list-group"> <button class="class-0 list-group-item"><span class="gap"></span>Edit</button> <button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button> <button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.