引导选项卡动态内容答案

【问题标题】：bootstrap tabs dynamic content引导选项卡动态内容
【发布时间】：2013-04-10 03:42:47
【问题描述】：

我正在过渡到 jquery 1.9 并使用 .on，过去我过于依赖 .live()，当然生活很棒，现在事情再次看起来很复杂。

我正在尝试将动态内容加载到一些引导选项卡中。但是使用 .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 中的条件正常运行，则运行完全相同。所以我非常有信心问题出在我尝试绑定事件处理程序的方式上。

我提前感谢你帮助我挽救了我的理智:)

【问题讨论】：

标签： jquery ajax twitter-bootstrap tabs event-handling

【解决方案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')
  }
});

【讨论】：

好的，我非常感激，这并不意味着这听起来很糟糕，但为什么会这样呢？我不明白如何为事件设置超时让它做它需要做的事情。我认为这是他们尝试使用 .on 完成的事情之一，并将事件侦听器添加到调用中。
这是因为由于我们使用setTimeout，javascript 的执行将延迟到当前执行范围完成，这将使浏览器有足够的时间来刷新应用到它的更改的 dom
@Mike 你打算采用哪种解决方案
@Mike 不是，您的 on 事件注册没有问题，是 if 声明失败
我根本没想过它会超时，因为选项卡一直在 DOM 中，所以我从来没有想过延迟。我通过自己在firefox中运行它来测试if条件，并且它有效。所以这让我认为它是.on。但现在一切都很好。再次感谢！

【解决方案2】：

我相信这是最好的方法：

//the reason for the odd-looking selector is to listen for the click event
// on links that don't even exist yet - i.e. are loaded from the server.
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
    e.preventDefault();
    var url = $(this).attr("data-url");

    if (typeof url !== "undefined") {
        var pane = $(this), href = this.hash;

        // ajax load from data-url
        $(href).load(url,function(result){      
            pane.tab('show');
        });
    } else {
        $(this).tab('show');
    }
});

在内容链接上使用 .tablink 类来链接选项卡。请参阅 JS 中的注释。 HTML

<div id="tabs">
    <ul class="nav nav-tabs" id="prodTabs">
        <li class="active"><a href="#tab_basic">Basic</a></li>
        <li><a href="#tab_images" data-url="?action=images">Images</a></li>
        <li><a href="#tab_videos" data-url="?action=videos">Videos</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab_basic" class="tab-pane active"></div>
        <div id="tab_images" class="tab-pane active"></div>
        <div id="tab_videos" class="tab-pane active"></div>
    </div>
</div>

原文：https://coderwall.com/p/1lnxba/load-bootstrap-tabs-dynamically 改编：http://www.bootply.com/63891

【讨论】：