Question

How would I use .on() in jQuery for an element that isn’t a direct parent?

.live() would look like this

$('.home_collapsibles').find('.ui-collapsible-heading').live('tap', function (event) {});

With elements of

<div data-role="collapsible-set" class="home_collapsibles ui-collapsible-set" data-theme="c" data-inset="false">    
    <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-iconpos="right" class="ui-collapsible ui-collapsible-collapsed">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-r" data-iconpos="right" data-theme="c">

Here is my JS Fiddle
http://jsfiddle.net/jostster/WD6DD/

EDIT: This seems to work http://jsfiddle.net/jostster/fNNnJ/, However I want to limit the listener to only in the .home_collapsibles

Answer 1

$('.home_collapsibles').on('tap', '.ui-collapsible-heading', function () {});