jQuery 选择动态生成的选项卡

Question

我正在使用 Bootstrap 并拥有动态创建的选项卡。虽然它们是动态的，但我只会创建 3 个选项卡。它们是:草稿、已发布和存档。这些实际上是枚举。

当我单击一个选项卡时，我想将隐藏字段更改为与该选项卡相同的值，以便在发生回发时，我希望打开之前打开的所选内容。

选项卡 ID 为 #i，其中 i 是 for 循环中的迭代器。因此选项卡将为:#0、#1 和 #2。

有谁知道如何为所有选项卡创建一个 onclick 事件，并将隐藏字段的值更改为选项卡 ID 的值。

这是代码:

<div class="tab-content">
    @for (int i = 0; i < Model.WorkflowStatuses.Count; i++)
    {
        <div class="tab-pane @(i == 0 ? "active" : string.Empty)" id="@i">

编辑这是我到目前为止所拥有的 - 然而隐藏字段的值没有改变:

<script>
$('#listingTab a[data-toggle="tab"]').on('show', function (e) {
    $('#selectedTab').val($(e.target).prop('id'));
})

@Html.HiddenFor(m=>Model.SelectedTab)

@if (Model.AnyListings)
{
<ul class="nav nav-tabs" id="listingTab">
    @for (int i = 0; i < Model.WorkflowStatuses.Count; i++)

编辑 我添加了字母“t”，但隐藏值仍然没有改变:

<script>
    $('#tab-content a[data-toggle="tab"]').on('show', function (e) {
        $('#SelectedTab').val($(e.target).prop('id'));
    })
</script>

@Html.HiddenFor(m=>Model.SelectedTab)

@if (Model.AnyListings)
{
    <ul class="nav nav-tabs" id="listingTab">
        @for (int i = 0; i < Model.WorkflowStatuses.Count; i++)
        {
            <li class="@(i == 0 ? "active" : string.Empty)"><a href="@string.Format("#t{0}", i)" data-toggle="tab">@Model.WorkflowStatuses[i].ToString()</a></li>
        }

Answer 1

尝试使用show event每当事件选项卡更改时就会触发:

$('#yourTabControl a[data-toggle="tab"]').on('show', function (e) {
  $('#hiddenField').val($(e.target).prop('id'));
})

[编辑]:

经过交谈，我们得出结论，e.target 是您单击的链接，而不是它激活的选项卡。因此，为了使代码更简单，我建议在链接上使用 data-tabid 属性:

<li class="@(i == 0 ? "active" : string.Empty)">
  <a href="@string.Format("#t{0}", i)" data-toggle="tab" 
     data-tabid="@i">@Model.WorkflowStatuses[i].ToString()</a></li>

并在事件处理程序中使用它:

$('#yourTabControl a[data-toggle="tab"]').on('show', function (e) {
  $('#hiddenField').val($(e.target).data('tabid'));
})