Question

我正在使用Bootstrap并且具有动态创建的Tab。虽然它们是动态的，但我只会创建3个Tabs。它们是：草案，已发布和已存档。这些实际上是Enums。

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

tabs 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

你不能给你的标签一个类，然后像这样绑定它们：

$(".tabs").on('click', function() {
 $('#my_input').val($(this).attr('id'));
});

此外，您需要使用字母启动标签ID标签。例如＃t1，＃t2等。

Answer 2

对现在和将来与当前选择器匹配的所有元素使用Live事件处理程序。

为所有生成的选项卡提供一个公共类，以便实时事件绑定器也将绑定到所有新创建的选项卡

$("a.offsite").live("click", function(){
    alert("Hi!");
    //Your code
});

参考http://api.jquery.com/live/

希望这有帮助

Answer 3

尝试使用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'));
})

jQuery选择动态生成的Tabs

3 个答案: