jQuery + canJS: click on nested List to many propagation

Question

i'm using canJs 1.1.8 and jQuery.

i have a nested list with some german states

<ul>
<li class="states active">
    <i class="icon-screenshot"></i> <span style="background-color: rgb(255, 255, 255); padding-right: 79px;">Bundesland</span>

    <input type="radio" value="state" name="location" class="hidden" checked="checked">

    <ul class="hidden" id="stateList" style="display: none;">
        <li><label class="checkbox"><div class="icheckbox_minimal-gray checked" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="1" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Baden-Württemberg</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="2" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Bayern</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="3" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Berlin</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="4" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Brandenburg</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray checked" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="5" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Bremen</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray checked" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="6" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Hamburg</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="7" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Hessen</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="8" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Mecklenburg-Vorpommern</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="9" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Niedersachsen</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="10" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Nordrhein-Westfalen</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="11" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Rheinland-Pfalz</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="12" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Saarland</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="13" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Sachsen</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="14" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Sachsen-Anhalt</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="15" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Schleswig-Holstein</label></li>
        <li><label class="checkbox"><div class="icheckbox_minimal-gray" style="position: absolute; left: 0px; top: -3px;"><input type="checkbox" value="16" name="state[]" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> Thüringen</label></li>


      </ul>
    </li>
</ul>

as i said, i'm using canJS. so i created a controller and an event:

'.states click': function (el, e) {

    var stateList = el.find('#stateList'),
        span = el.find('> span');


    if(stateList.is(':hidden')){

        span.css({
            'background-color':'#fff',
            'padding-right': 180 - parseInt(span.outerWidth(),10)+parseInt(span.css('padding-right'),10)
        });

        el.find('#stateList').stop().slideDown();

    // collapse
    }else{
        el.find('#stateList').stop().slideUp();
    }
    return false;
}

if i clicked on .states, the hidden list will appear. but if i clicked on one of the checkboxes in the nested list, the list will collapse too. how can i prevent this?

The nested list is positioned absolutely.

Here is the fiddle http://jsfiddle.net/qYdwR/1017/

Answer 1

I think your issue has to do with event bubbling. If you click on a child of the .states list, that bubbles up to list, and triggers your event handler code. You need to look at the e.target object on your event -- aka, the element that triggered the event, not necessarily the one on which it was registered -- and only handle the case where that target has the .states class.

'.states click' : function(el, e) {

    if ( !$(e.target).hasClass('.states') ) return false;

    // your handler code here

}

Answer 2

Try a more specific selector:

'li.states click': function (el, e) {

Do you have some live code we can see?