Bootstrap: Отменить data-toggle = «свернуть» на вложенной кнопке

Question

Я хочу, чтобы моя панель-коллапс рушилась при нажатии на заголовок панели, но не при нажатии кнопки в заголовке панели.

Мой код:

<div class="panel panel-default"> 
    <div class="panel-heading clearfix" data-toggle="collapse" href="#collapseBody"> 
    <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Body</h4> 
    <div class="btn-group pull-right"> 
     <!-- The problematic button --> 
     <a href="#" class="btn btn-default">Button</a> 
    </div> 
    </div> 
    <div class="panel-collapse collapse in" id="collapseBody"> 
    <div class="panel-body" id="body"> 
    </div> 
    </div> 
</div> 

Что я пробовал:

Я пытался добавить

<script> 
    $('.btn').on('click', function (e) { 
     e.stopPropagation(); 
    }); 
</script> 

Но без какого-либо эффекта.

Может кто-нибудь помочь новичку? (:

Answer 1

adeneo дал золотой наконечник в своем комментарии

Fix:

<script> 
    $(document).ready(function() { 
     $('.btn').on('click', function (e) { 
      e.stopPropagation(); 
     }); 
    }); 
</script>