[英]Dynamically created popover with buttons
I am normally a backend dev;我通常是后端开发人员; but for this I know I am getting caught out by not working within the how the web browser works.但为此,我知道我因为不在网络浏览器的工作方式中工作而陷入困境。
I left the JavaScript alert in there for ease of use.为了便于使用,我将 JavaScript 警报留在了那里。 depending on which button you clicked in the popover it should popup and say leave-X or office-x where X is the ID of the which the button was a part of.根据您在弹出窗口中单击的按钮,它应该弹出并说 leave-X 或 office-x,其中 X 是按钮所属的 ID。
But they all say "leave-1" or "office-1" regardless of which field I choose.但无论我选择哪个领域,他们都说“leave-1”或“office-1”。 I know I am pulling the correct data from the correct field as changing "1" to say "foo" it will display office-foo.我知道我正在从正确的字段中提取正确的数据,因为将“1”更改为“foo”,它将显示 office-foo。
I would rather not have a separate bespoke popover for each table-cell as that would be hundreds of entries in the final product.我宁愿没有为每个表格单元单独定制弹出框,因为这将是最终产品中的数百个条目。
My basic 2x2 table & jQuery/bootstrap code:我的基本 2x2 表和 jQuery/bootstrap 代码:
<div class="container">
<table class="table table-striped">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="1" class="td-Office">1</td>
<td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="2" class="td-Office">2</td>
</tr>
<tr>
<td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="3" class="td-Office">3</td>
<td data-placement="bottom" tabindex=-1 data-toggle="popover" data-trigger="focus" data-container="body" id="4" class="td-Office">4</td>
</tr>
</table>
</div>
var parentClass = $("[data-toggle=popover]").attr('id');
$("[data-toggle=popover]").popover({html: true, content: `<div id="popover-content">
<button id="office-`+ parentClass +`" class="btn btn-sm btn-Office" onclick="toggleTD(this);">Office</button>
<button id="leave-`+ parentClass +`" class="btn btn-sm btn-Leave" onclick="toggleTD(this);">Leave</button>
</div>`});
$('.popover-dismiss').popover({
trigger: 'focus'
})
function toggleTD(elm) {
alert(elm.id);
}
The problems is that parentClass value is always "1";问题是 parentClass 值总是“1”;
If you want to use the button id, replace the content with a function, and use this.id:如果要使用按钮 id,请将内容替换为一个函数,并使用 this.id:
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return `<div id="popover-content">
<button id="office-`+ this.id +`" class="btn btn-sm btn-Office" onclick="toggleTD(this);">Office</button>
<button id="leave-`+ this.id +`" class="btn btn-sm btn-Leave" onclick="toggleTD(this);">Leave</button>
</div>`
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.