bootstrap checkbox button проблема распространения событий

Question

У меня есть настраиваемая панель с div для секции заголовка панели. При нажатии этой панели следует развернуть/свернуть содержимое панели, которая отлично работает с помощью jQuery.

В заголовке панели я установил флажок bootstrap с намерением, чтобы проверка флажка активировала эту панель, но не влияет на то, будет ли содержимое панели расширяться или сворачиваться.

Проблема:

Нажатие проверки флажок и неустановленными загрузочный флажок, но и расширяется/разрушается содержимое панели.

Что я пытался:

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

//try get rid of event bubbling for checkboxes 
$(".btn-group.checkbox").on("change", function (e) 
{ 
    /*I've tried each of these variations*/ 
    //e.stopPropagation(); 
    //e.preventDefault(); 
    //return false; 
}); 

Я также попытался событие щелчка вместо изменения и я попытался это на .btn элемента в БТН-группы:

//try get rid of event bubbling for checkboxes 
$(".btn-group.checkbox .btn").on("change", function (e) 
{ 
    /*I've tried each of these variations*/ 
    //e.stopPropagation(); 
    //e.preventDefault(); 
    //return false; 
}); 

Ни один из этих вариантов не работал флажок все еще вызывает отображение и скрытие содержимого панели.

Answer 1

я понял, что я, возможно, глядя на это неправильный путь. Я все еще не уверен на 100%, почему я не смог использовать stopPropagation, я подозреваю, что он имеет какое-то отношение к Bootstrap, уже связав свой собственный обработчик событий, но я не полностью убежден.

Мой альтернативный подход состоял в том, чтобы подключить событие щелчка секции панели панели, а затем проверить цель исходного события, чтобы увидеть, откуда оно взялось. Если это был пользовательский флажок, я проигнорировал его, чтобы флажок bootstrap выполнял свою работу. Если нет, я переключил содержимое панели.

Вот код:

//handle the panel bar header click event 
$(".pnl-01-bar").click(function (e) 
{ 
    //get a jquery reference to the original target of this event 
    var $target = $(e.originalEvent.target); 

    //if this did NOT come from the checkbox 
    if (!$target.hasClass("bs-checkbox")) 
    { 
     //toggle the panel content 
     $("#pnlSlider1").toggle(); 
    }    
}); 

Вот HTML:

<div class="scenario-heading pnl-01-bar"> 
    <div class="col-md-3"> 
     <div data-toggle="buttons" class="btn-group checkbox"> 
     <label class="btn btn-primary checkbox" for="UseRetirementAge"> 
     <span class="bs-checkbox"></span> 
     <input type="checkbox" style="visibility: hidden" data-val="1" id="UseRetirementAge" name="UseRetirementAge" value="1"> 
     </label> 
     </div> 
     <span data-valmsg-replace="true" data-valmsg-for="UseRetirementAge" class="field-validation-valid"></span> 
      Change my retirement date 
     </div> 
</div> 
<div class="scenario-panel"> 
    <div style="display:none" id="pnlSliders1"> 
     ...panel content goes here 
    </div> 
</div> 

Answer 2

Можете ли вы попробовать это $(".btn-group.checkbox .btn").on("change", function (e) { if (!e) var e = window.event e.cancelBubble = true; //try this if (e.stopPropagation) e.stopPropagation();
//if above code is not working then try //if (e.stopImmediatePropagation) e.stopImmediatePropagation(); }); Надеюсь, что это работает для вас :)