event-delegation

I am trying to stop some events but stopPropagation does not work with "live" so I am not sure what to do. I found this on their site. Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation. For example, take the case of two click events - one bound to "li" and another "li a". Should a click occur on the inner anchor BOTH events will be triggered. This is because when a $("li").bind("click", fn); is bound you're actually saying "Whenever a click event occurs on an LI element - or inside an LI element - trigger this click

UPDATE: (recap, fiddle and bounty) This question hasn't been getting too much attention, so I'm going to spend some rep on it. I know I tend to be overly verbose in both my answers and questions. That's why I went ahead and set up this fiddle , which is, in my view, a decent representation of the kind of code I'm currently having to use to come close to a bubbling change event. A couple of issues I'm trying to resolve: The pseudo-change event doesn't fire on a select element, unless it looses focus. In some cases the client should be redirected upon selecting a new value. How do I achieve this

I have some markup like this (classes are just for explication): <ol id="root" class="sortable"> <li> <header class="show-after-collapse">Top-Line Info</header> <section class="hide-after-collapse"> <ol class="sortable-connected"> <li> <header class="show-after-collapse">Top-Line Info</header> <section class="hide-after-collapse"> <div>Content A</div> </section> </li> </ol> </section> </li> <li> <header/> <section class="hide-after-collapse"> <ol class="sortable-connected"> <li> <header/> <section class="hide-after-collapse"> <div>Content B</div> </section> </li> </ol> </section> </li> </ol>