我有一个一栏表及其具有弹出框类的 TD。因此,在该 TD 中,单击按钮时将要求指定输入,如下所示
正如您所看到的,图表按钮触发了该 TD 的弹出窗口,并且弹出窗口上有 2 个输入。
所以我的方案是附加弹出窗口中的输入值,以将其复制到“没有指定基准标签”的 div 中。那么我如何确定弹出窗口是为哪个 TD 或哪个父级创建或启动的。更清楚地显示当我单击“保存”按钮时如何确定 Popover 的创建者。
代码
$('.main-attributes').popover({
html: true,
container: 'body',
placement: 'auto top',
trigger: 'manual',
title: function () {
return $(this).find('.attribute-title').html() + " - Score Range"
},
content: function () {
var H = $('#div_scoreselector');
return $(H).html();
}
})
$('.manage-range').on('click', function (e) { //.manage-range is the chart button as shown in image which opens the popup
var ma = $(this).parents('.main-attributes');
$('.main-attributes').not(ma).popover('hide');
$(ma).popover('toggle');
e.stopPropagation();
});
分数选择器 DIV
<div class='hidden' id='div_scoreselector'>
<div>
<div class="row">
<div class="col-md-12">
<div class="row div-scorerange">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">
From</label>
<input placeholder="Low Score" type="text" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">
To</label>
<input placeholder="High Score" type="text" class="form-control" />
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-6 col-md-offset-6">
<button class="btn-dark-grey btn">
CANCEL</button>
<button class="btn btn-red">
SAVE</button>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
假设您有多个具有 main-attributes 类的元素,其通用方式如下:
<div class="main-attributes">
<span class="text-container">No Benchmarks Specified</span>
<button class="manage-range">Chart Button 1</button>
</div>
<div class="main-attributes">
<span class="text-container">No Benchmarks Specified</span>
<button class="manage-range">Chart Button 2</button>
</div>
... etc.
在 .manage-range 点击处理程序中设置对 $(this) 的引用(也称为在 X 行单击的按钮),一旦触发 Bootstrap popover shown 事件,您就可以将上下文存储为数据值保存按钮。 BS Popover docs
$('.manage-range').on('click', function (e) {
// ... your code here
var $this = $(this);
$('.main-attributes').off('shown.bs.popover').on('shown.bs.popover', function () {
$('.popover button.save').data('context', $this);
});
e.stopPropagation();
});
在 .manage-range 点击处理程序之外为保存按钮设置点击事件,如下所示:
// Assuming you have a .save class on the Save button
$(document).on('click', '.save', function () {
var $context = $(this).data('context');
var fromval = $('.popover #fromvalue').val();
var toval = $('.popover #tovalue').val();
// Now get the text container relative to the $context passed in
$context.siblings('.text-container').text('From: ' + fromval + ' To: ' + toval);
});
这是一个粗略的 fiddle :http://jsfiddle.net/9m8Yr/
关于jquery - 将引导弹出窗口输入值绑定(bind)到拥有弹出窗口的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23821942/