jquery - Bootstrap 选项卡动态内容

Question

我正在过渡到 jquery 1.9 并使用 .on，过去我过于依赖 .live()，当然生活是美好的，现在事情再次显得非常复杂。

我正在尝试将动态内容加载到一些 Bootstrap 选项卡中。但对于 .on，我无法弄清楚如何在显示 #ticketnotes 时触发 ajax 调用。

html如下:

<div class="tabbable ticket_tabs">
    <ul class="nav nav-tabs" id="tickettabs">
        <li class="active">
            <a href="#ticketreplies" data-toggle="tab">Replies</a>
        </li>
        <li >
            <a class="tabtickets" href="#ticketnotes" data-toggle="tab">Ticket Notes</a>
        </li>
         <li>
            <a href="#timetrackticket" data-toggle="tab">Time Track</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="ticketreplies">
            $body
            $replyForm
        </div>
        <div class="tab-pane" id="ticketnotes">
            <div class="well">
                <div class="loader" style="display:none;">
            </div>
        </div>
        $replyForm
    </div>
    <div class="tab-pane" id="timetrackticket">
        <div class="well">time track info</div>
    </div>
</div>

当页面加载时，“票证回复”已经存在，但鉴于我希望将加载时间保持在最低限度，我宁愿单独加载所有关联数据，查看票证并不一定意味着有人将浏览笔记，因此无需立即加载。

我的最后一次尝试看起来像:

$('#tickettabs').on('show', '.tabtickets', function(){
    if($('#ticketnotes').is(":visible")){
        alert("hi");
    }
});

不用说，它从来没有打过招呼。

在 Firefox 中运行完全相同的 if 条件可以正常工作。所以我非常有信心问题在于我如何尝试绑定(bind)事件处理程序。

提前感谢您帮助我挽救了我仅存的理智:)

Answer 1

这是因为当 show 事件被触发时，浏览器可能没有时间重新绘制 dom。

对此的一个可能的解决方案是使用延迟为 0 的超时函数。

$('#tickettabs').on('show', '.tabtickets', function(e){
  setTimeout(function(){
    if($('#ticketnotes').is(":visible")){
        alert("hi");
    }
  }, 0)
});

演示:Plunker

另一个解决方案是检查单击了哪个选项卡标题

$('#tickettabs').on('show', '.tabtickets', function(e){
  if($(this).has('a.tabtickets')){
    alert('has tabtickets')
  }
});