This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by hs1972
about 9 years

9/14 - ol and not li?

Can someone tell me why we’re required to call the .selectable() function on ‘ol’ and not ‘li’?After all the effect is on the actual list items not the overall list, that is you click on an individual items and the effect impacts that individual item.

I’m just trying to get my head around how I determine the correct HTML tag to target to get the effect I’m looking for.

Thanks in advance.

Answer 54d69c0586f552cc880053f4

1 vote

Permalink

The OL is the parent element, so if we attach a listener to it, events will be delegated down the cascade to all its child and descendant elements. One listener, all element events, as opposed to having listeners on each and every LI.

points
Submitted by Roy
about 9 years

1 comments

hs1972 about 9 years

Thanks Roy, that does make sense now.

Answer 54d69da151b887a7c400598c

1 vote

Permalink

Consider:

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ol>

and the JS,

$('ol').on('click','li',function(){});

Not the best example but it illustrates how any click within the OL will trigger the handler. Those click events will ‘bubble up’ to the parent element as a matter of course, so having the listener there rather than on the LI’s prevents propagation.

This topic (events, bubbling, propagation, delegation) is a tough one to explain without messing up, so it is recommended reading. Definitely follow up on this one.

points
Submitted by Roy
about 9 years

1 comments

hs1972 about 9 years

I’m learning a lot here, and will definitely take your advice of reading up on this. Thanks again, your help is appreciated.