Question

我有一个bootstrap navtab，它在每个选项卡的表格中显示数据。我还有一个日期选择器，允许您输入日期，单击提交，然后在选项卡中显示该日期的数据。我需要能够在选项卡之间切换并在日期选择器中输入日期以更新选项卡单击上的数据。我做了什么，除了当我最初尝试从delayedspiff选项卡切换到instantspiff选项卡时，instantspiff将无法工作，直到我输入日期并单击我的按钮提交。这是我的navtabs和按钮的代码：

<div class="row spiff-datepicksection">
                <div class="col-lg-6 pull-right">
                    <div class="col-sm-5 col-lg-offset-4">
                        <div class="form-group">
                            <div class="input-group date">
                                <input type="text" id="startDate" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <input class="spiffdate-btn spiffdate" type="button" value="Submit" />
                    </div>
                </div>
            </div>


            <div class="row spiff_tabs_body">
                <!-- Nav tabs -->

                <ul class="nav nav-tabs spiff_tabs" role="tablist">
                    <li role="presentation" class="active">

                        <a href="#home" aria-controls="home" class="spiffdate" role="tab" data-id="delayedspiff" data-toggle="tab">Potential Spiff</a>


                    </li>
                    <li role="presentation">

                        <a href="#profile" class="spiffdate" aria-controls="profile" role="tab" data-id="instantspiff" data-toggle="tab">Instant Spiff</a>     

                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content" id="details">
                    <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                    <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
                </div>
            </div>
        </div>
    </div>

这是我的点击事件。我正在尝试使用类spiffdate来在tab开关上使用click事件。

<script>    
    $(".spiffdate").click(function () {
       var correctId = $("ul.spiff_tabs li.active a").attr('data-id');

       var endDate = $("#startDate").val();
       if (endDate == "") {

       } else {
           if (correctId == "delayedspiff")
           {
               FormGet('dashboard/delayedspiff?endDate=' + endDate, 'delayedspiff')


           } else if (correctId = "instantspiff") {
               FormGet('dashboard/instantspiff?endDate=' + endDate, 'delayedspiff')

           }           
       }     
   });   
</script>

Answer 1

这里可能发生的是，您的点击功能实际上是在发生制表符更改事件之前调用的。因此，在您执行其他操作之前，active类尚未应用于新元素。

要解决此问题，我会改为观看shown.bs.tab事件。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    //do your code here now
});

Answer 2

@Ohgodwhy推荐的是检查制表符开关上事件的正确方法。但是，由于您将点击处理程序映射到提交按钮和选项卡，因此您需要正确处理调用。

这是你可以尝试的东西

var correctId;
var triggerFromTabs;

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    alert('Event From Tab');
        if($("#startDate").val().length) 
           populateData();                   
});

function populateData()
{
    alert('populate data');
    if (correctId == "delayedspiff")
           {
               $("#divData").html("Data For Delayed");             


           } else if (correctId == "instantspiff") {

               $("#divData").html("Data For Instant");

           }     
}


$(".spiffdate").click(function (e) {
       if($(this).data("id") != undefined)
       { 
           triggerFromTabs = true;
           correctId = $(this).data("id");
       }
       else
       {
           triggerFromTabs = false;
           correctId = $("ul.spiff_tabs li.active a").attr('data-id');
       }
       alert("Selected tab : " + correctId);
       if($("#startDate").val().length && !triggerFromTabs)   
         populateData();
   });

以下是工作示例：http://jsfiddle.net/RxguB/201/

Bootstrap navtabs无法正常工作

2 个答案: