jQuery .live() und .on(): Was mache ich falsch?

Question

Ich versuche, ein Klick-Ereignis an bestimmte Elemente in jQuery (v1.8.18) zu binden. Ich habe zwei Elemente, die meinen Selektor, die zu der Zeit, die ich tun, die Bindung vorhanden sind, aber es gibt auch ein drittes Element, das schließlich meinen Selektor übereinstimmen wird, aber die nicht bis zu einem gewissen Zeitpunkt markiert, nachdem ich die Ereignisse registriert haben.

Wenn ich nur benutze:

$('.collapsible h2 > .ui-icon').bind('click', toggleCollapsibleList);

...dann bindet es korrekt an die beiden, die bereits existieren, aber offensichtlich nicht an das dritte. Wenn ich verwende:

$('.collapsible h2 > .ui-icon').live('click', toggleCollapsibleList);

...dann wird keiner von ihnen gebunden. Und wenn ich benutze:

$('.collapsible h2 > .ui-icon').on('click', toggleCollapsibleList);

...dann verhält es sich genauso wie .bind(). Ich habe mit den Entwicklertools bestätigt, dass alle drei Elemente im DOM vorhanden sind und dem Selektor entsprechen, nachdem die Seite fertig geladen ist. Weiß jemand, was ich falsch machen könnte?

Answer 1

JQuery's .on() wurde eingeführt in 1.7 und damit verwerflich .live() . Die Art und Weise, wie Sie die .on() ist zur Zeit nicht korrekt, wenn Sie wollen, dass es sich verhält wie .live() .

Sie wollen tatsächlich Folgendes verwenden .on() etwas wie:

$(document).on('click', '.collapsible h2 > .ui-icon', toggleCollapsibleList);

Das Folgende stammt aus der jQuery .live() docs :

$(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+

Answer 2

// These will attach an event handler for all elements which match the 
// current selector NOW
$('.collapsible h2 > .ui-icon').bind('click', toggleCollapsibleList);
// is equivalent to
$('.collapsible h2 > .ui-icon').on('click', toggleCollapsibleList);

// These will attach an event handler for all elements which match the 
// current selector NOW AND IN THE FUTURE

// not recommended
$('.collapsible h2 > .ui-icon').live('click', toggleCollapsibleList); 
// is equivalent to
// recommended
$(document).on('click', '.collapsible h2 > .ui-icon', toggleCollapsibleList);