jQuery clone () klont keine Ereignisbindungen, auch nicht mit on ()

Ich habe eine Reihe von benutzerdefinierten jQuery-Ereignissen zur Verwendung in mobilen Webanwendungen erstellt. Sie funktionieren hervorragend und wurden getestet. Ich bin jedoch auf ein kleines Problem gestoßen, das ich nur schwer verstehen kann.

Ich verwende .clone()einige Elemente im DOM, die eine Schaltfläche enthalten. An die Schaltfläche sind einige der benutzerdefinierten Ereignisse gebunden (die Ereignisse werden mit gebunden .on()), aber. Wenn ich jQuery's verwende .clone(), bleiben die Bindungen leider nicht erhalten und ich muss sie erneut hinzufügen.

Hat jemand dies schon einmal erlebt, kennt jemand eine mögliche Problemumgehung? Ich dachte, dass die Verwendung .on()die Bindung für Elemente bewahren sollte, die jetzt oder in Zukunft existieren?

Ich denke, Sie sollten diese Überladung der .clone () -Methode verwenden:

$element.clone(true, true);

Klon ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents : Ein Boolescher Wert, der angibt, ob Ereignishandler und Daten zusammen mit den Elementen kopiert werden sollen. Der Standardwert ist false.

deepWithDataAndEvents : Ein Boolescher Wert, der angibt, ob Ereignishandler und Daten für alle untergeordneten Elemente des geklonten Elements kopiert werden sollen. Standardmäßig entspricht der Wert dem Wert des ersten Arguments (standardmäßig false).

Beachten Sie, dass .on()die Ereignisse nicht an die Ziele gebunden werden, sondern an das Element, an das Sie delegieren. Also, wenn Sie haben:

$('#container').on('click', '.button', ...);

Die Ereignisse sind tatsächlich an gebunden #container. Wenn ein Klick auf ein .buttonElement auftritt, sprudelt es bis zum #containerElement. Das Element, das das Ereignis ausgelöst hat, wird anhand des Auswahlparameters von ausgewertet. .on()Wenn es übereinstimmt, wird der Ereignishandler ausgeführt. So funktioniert die Ereignisdelegierung.

Wenn Sie das Element #container klonen, müssen Sie tief mit Ereignissen und Daten klonen, damit die Bindungen .on()erhalten bleiben.

Dies wäre nicht erforderlich, wenn Sie .on()ein übergeordnetes Element von verwenden würden #container.

Sie sollten sich der Tatsache bewusst sein, dass der 1.5 jQuery-Version eine Deep Cloning-Funktionalität hinzugefügt wurde.

Weitere Infos zu diesem Thema:

http://api.jquery.com/clone/