CODEWITHSUNDEEP
jquery
Bot
Bot

Reputation: 11845

Use of .on() without direct parent

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

Upvotes: 0

Views: 99

Answers (2)

Chase
Chase

Reputation: 29549

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

For pages still using .live(), this list of version-specific differences may be helpful:

Before jQuery 1.7, to stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this. As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events that bubble. It also supports certain events that don't bubble, including change, submit, focus and blur. In jQuery 1.3.x only the following JavaScript events could be bound: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

From: http://api.jquery.com/live/

Upvotes: 1

Paul Fleming
Paul Fleming

Reputation: 24526

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

Upvotes: 2

Related Questions