访问.load()中的引导选项卡

时间:2015-07-29 13:11:29

标签: javascript jquery twitter-bootstrap

我正在尝试创建一个收件箱,当他们点击邮件标题时,通过jQuery的.load()向我的用户显示他们发送的邮件。

我遇到的问题是加载的邮件包含引导标签,我不能这样做。我知道它们不起作用的原因是因为它们是在加载后添加的,它们需要“冒泡”。我似乎无法让他们“冒泡”。

主页包含:

long()

.load()页面,添加到上面:

<div id="message-view" class="block-section display-none">
    </div>

脚本:

<div id="messageDetailView">
         <!-- Message Body -->
            <hr>
               {{$message->body}}
            <hr>

         <!-- Tabs -->
            <div class="block-section">
               <ul class="nav nav-tabs testTabs" data-toggle="tabs">
                  <li class="active"><a href="#sent">Sent</a></li>
                  <li><a href="#open">Opened</a></li>
                  <li><a href="#bounced"><i class="gi gi-settings">Bounced</i></a></li>
               </ul>
            </div>
          <!-- Tabs Content -->
             <div class="tab-content">
                <div class="tab-pane active" id="sent">Sent</div>
                <div class="tab-pane" id="open">Open</div>
                <div class="tab-pane" id="bounced">Bounced</div>
              </div>
        <!-- END Tabs Content -->
        <!-- END Tabs -->
    </div>

我认为.append()会起作用,但事实并非如此。

 $('body').on('click', '.sentMessage', displayMessage);
    function displayMessage(){
        var messageId = $(this).attr("id");
        var inboxView = $('#message-view');

        inboxView
            .load( baseURL+'/contractors/messageDetails/'+messageId)
            .removeClass('display-none')
            .addClass('animation-fadeInQuick2');

        $('#messageDetailView').appendTo('#message-view');
    };

我还尝试附加到'body'并将.appendTo放在一个单独的函数中,并使用自己的事件处理程序。如何使脚本可以访问这些选项卡?

1 个答案:

答案 0 :(得分:0)

stopPropagation()就是我追求的目标。

$('body').on('click', '.nav-tabs a', function(e){
    e.stopPropagation();
      $(this).tab('show');
    });

我想,这可能会导致睡眠不足。