data-toggle = "collapse"内にエキスパンド要素を持つコンボボックス内のstopPropagation動作

Question

私はdinamicallyビルドしたコンボボックスを持っています。コンボボックス内には展開可能な要素があります）子要素を表示するように成長します：

<ul id="company-dropdown" class="dropdown-menu company-dropdown"> 
    <li data-id="65"> 
     <a> 
      <div data-toggle="collapse" href="#childs65" class="filter-caret-container active"> 
       <i class="pull-left caret filter-caret"></i> 
      </div> 
      <input class="checkbox-filter" type="checkbox"> 
      Juan juan juan 
     </a> 
     <ul id="childs65" class="panel-collapse collapse"> 
      <li data-id="70">...</li> 
     </ul> 
    </li> 
    <li data-id="89"> 
     ... 
    </li> 
</ul> 

問題は、私はそれがまた要素自体をチェックする要素のチャイルズを展開するキャレットをクリックしたときということです。 だから、私はe.stopPropagationを試してみましたが、この方法では私もそれを拡張することはできません。キャレットをクリックしたときに、私はのstopPropagationから「イベント」を削除した場合

$('.company-dropdown').off('click', 'li .filter-caret-container') 
    .on('click', 'li .filter-caret-container', function(e) { 
     e.stopPropagation(); 
    }); 

$('.company-dropdown').off('click', 'li .checkbox-filter') 
    .on('click', 'li .checkbox-filter', function(e) { 
     e.stopPropagation(); 
    }); 

//Check/uncheck the checkbox when click on any part of the element inside the dropdown 
$('.company-dropdown').off('click', 'li a') 
    .on('click', 'li a', function() { 
     var dataId = $(this).closest('li').data('id'), 
      $checkboxItem = $(' li[data-id="' + dataId + '"]>a>.checkbox-filter'), 
      isChecked = $checkboxItem.prop('checked'); 

     $checkboxItem.prop('checked', !isChecked); 
    }); 

好奇心旺盛なことが起こる：私はすべてが期待どおりに動作します！どうして？

$('.company-dropdown').off('click', 'li .filter-caret-container') 
    .on('click', 'li .filter-caret-container', function() { 
     stopPropagation(); 
    }); 

Answer 1

まず、伝播を停止してから、私たちは子要素のリストを展開するために手動で切り替える：

$('.company-dropdown').off('click', 'li .filter-caret-container') 
    .on('click', 'li .filter-caret-container', function(e) { 
     e.stopPropagation(); 
     var childsToShow = $(this).attr('href'); 
     $(childsToShow + '.panel-collapse').toggle(); 
    });