Dan Gravell Dan Gravell - 1 year ago 70
HTML Question

CSS3 switch inside clickable element

I have the following html:

<li class="list-group-item li-tab-1">
<div class="list-group-item-desc" data-target="#tab-1" data-toggle="tab">
<div class="small m-t-xs">
<div class="onoffswitch">
<input type="checkbox" checked="checked" class="onoffswitch-checkbox" id="tab-1-enabled" /> <label class="onoffswitch-label" for="tab-1-enabled"> <span
class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>

This is a Bootstrap tab.
is a CSS3 switch.

I'm trying to make the entire
clickable to show
as the tab content.
I can do this by defining a
with the
attributes. This works - when I click the div the tab shows.

However, embedded inside the
is a CSS3 switch. I want that to work independently of the clickable div.

This is similar to Links inside of larger clickable areas (CSS Only), except the nested clickable elements are CSS3 switches instead of anchors.

Using the CSS3 switch outside the anchor works fine.

I tried making the actual hidden checkbox visible, removing the CSS3 styling, and clicking that. That does work, so is this related to CSS3?

I wondered if this is related to propogation - the trouble is that if I set an event listener for
I get no events - just the div click event.

Answer Source

Turned out it was propogation that was the problem (thanks @TW80000).

$(".list-group-item-desc").click(function(ev) {
    var isSwitchClick = $('.onoffswitch').has($(ev.target)).length > 0;
    if(isSwitchClick) {

That checks whether the click was inside the switch, and if so stops propogation.

In reality I have since moved the Bootstrap tab attrributes into the <li> but I think either approach should work to avoid swallowing the event.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download