Bootstrap - Dropdown & Tab

[jackmew]

I found that when I click inside the dropdown , no matter something are in dropdown , it will close .

[jackmew]

<!-- HTML -->
<div>
    <ul class="nav navbar-nav"> 
        <li class="dropdown"> 
              <button name="BtnTriggerTab" class="btn btn-default" type="">Dropdown with Tab</button>

            <ul class="dropdown-menu">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                  <li role="presentation" class="active"><a href="#t1" role="tab" data-toggle="tab">Home</a></li>
                  <li role="presentation"><a href="#t2" role="tab" data-toggle="tab">Profile</a></li>
                  <li role="presentation"><a href="#t3" role="tab" data-toggle="tab">Messages</a></li>
                  <li role="presentation"><a href="#t4" role="tab" data-toggle="tab">Settings</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content" style="width:400px">
                  <div role="tabpanel" class="tab-pane active" id="t1">home
                       <button id="testBtn1" class="btn btn-default" type="">testBtn</button>
                  </div>
                  <div role="tabpanel" class="tab-pane" id="t2">profile</div>
                  <div role="tabpanel" class="tab-pane" id="t3">messages</div>
                  <div role="tabpanel" class="tab-pane" id="t4">settings</div>
                </div>
            </ul>
        </li>
    </ul>
</div>

// javascript
$('li.dropdown button[name="BtnTriggerTab"]').on('click', function (event) {
  $(this).parent().toggleClass("open");
});
$('#testBtn1').on('click', function (event) {
  alert("testBtn1");
});