stopPropagation behavior inside a combobox that have an expandable element inside data-toggle="collapse"

Question

I have a combobox that I build dynamically, and inside the combobox I have some elements that can expand and have more elements to show (the combobox will grow to show the child elements):

<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> 

The problem is that when I click on the caret to expand the child of an element it also checks the element itself. So I tried e.stopPropagation to avoid to check it but this way I can't expand it either.

$('.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);
    });

A curious thing happen if I remove the 'event' from the stopPropagation when clicking the caret: Everything works as I expected! Why?

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

Answer 1

First we stop the propagation and then we toggle manually to expand the list of child elements:

$('.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();
    });