[英]How to pass an argument to a button click function inside bootstrap popover content?
I have a list of box objects and I am making each of them has a popover window. 我有一个框对象列表,并且使每个对象都有一个弹出窗口。 I add a button inside my popover window and I am trying to set the
click
event function for the button. 我在弹出窗口内添加了一个按钮,并且试图设置按钮的
click
event函数。 The click
function show invoke my showBox(box)
function which takes an argument box
. click
函数show调用我的showBox(box)
函数,该函数带有一个参数box
。 How can I pass this box
argument to the button inside the popover window? 如何将此
box
参数传递给弹出窗口内的按钮? Here is the code I have now: 这是我现在拥有的代码:
var tabindex = 0;
box_resources.forEach(function(box) {
var title = truncateTitle(box.title);
var title_button = '<a tabindex="' + tabindex + '" class="box-title-item btn btn-primary btn-xs" role="button" data-trigger="focus" style="margin:5px" data-toggle="popover">' + title + '</a>';
var $list_item = $(title_button);
$("#coverages-master-list").append($list_item);
var show_box_button = '<a class="btn btn-primary" role="button">' + box.title + '</a>';
$list_item.popover({
html: true,
placement: 'top',
title: box.title,
content: '<p>' + show_box_button + '</p>',
trigger: 'focus'
});
tabindex++;
});
How can I bind a click
event for my show_box_button
and how can I make it invoke my showBox(box)
function which takes an argument box
? 如何为
show_box_button
绑定click
事件,如何使其调用带有参数box
showBox(box)
函数? Thanks! 谢谢!
You can use the popover .on('shown.bs.popover'...
event to add your click event to the current popover button 您可以使用
.on('shown.bs.popover'...
事件将您的click事件添加到当前弹出按钮
make sure to use
.one('click'...
here not.on('click'...
确保使用
.one('click'...
这里不是.on('click'...
and then call your showBox
function with the box_resources
array adding the tabindex
of the current element. 然后使用
box_resources
数组添加当前元素的tabindex
来调用showBox
函数。
$(function () { var $coveragesMasterList = $("#coverages-master-list"); var showBox = function(box) { console.log(box.title); } var box_resources = [ { title: 'Box A' }, { title: 'Box B' }, { title: 'Box C' }, { title: 'Box D' }, { title: 'Box E' } ]; var tabindex = 0; box_resources.forEach(function(box) { var title_button = '<a tabindex="' + tabindex + '" class="box-title-item btn btn-primary btn-xs" role="button" data-trigger="focus" style="margin:5px" data-toggle="popover">' + box.title + '</a>'; var $list_item = $(title_button); $coveragesMasterList.append($list_item); var show_box_button = '<a class="btn btn-default btn-xs" role="button">' + box.title + '</a>'; $list_item.popover({ html: true, placement: 'top', title: box.title, content: '<p>' + show_box_button + '</p>', trigger: 'focus' }); $list_item.on('shown.bs.popover', function () { var boxIndex = $(this).attr('tabindex'); var $crntPopOver = $(this).next(); var $crntPopOverBtn = $crntPopOver.find('.btn-default'); $crntPopOverBtn.one('click', function() { showBox(box_resources[boxIndex]); }) }) tabindex++; }); });
@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); body { margin-top: 100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div id="coverages-master-list" style="display:inline-block; height:150px; overflow-y: auto"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.