[解決済み] jQuery clone()でon()を使ってもイベントバインディングがクローンされない

質問

私は、モバイルWebアプリケーションで使用するために、一連のカスタムjQueryイベントを作成しました。これらは素晴らしく動作し、テスト済みです。しかし、理解するのに苦労する小さな問題に遭遇しました。

私は .clone() を使用しています。この要素はボタンを含んでいます。ボタンにはカスタムイベントのいくつかがバインドされています (イベントは .on() を使用してバインドされています）、しかし。残念ながら、私がjQueryの .clone() を使用すると、バインディングは保存されず、再度追加する必要があります。

どなたか、この問題に遭遇したことがある方、潜在的な回避策をご存知の方はいらっしゃいますか？私は .on() を使用すると、現在または将来的に存在する要素のバインディングを維持することになっていると思いましたか？

どのように解決するのですか？

私は、このオーバーロードを使用するべきだと思います。 .clone() メソッドを使うべきだと思います。

$element.clone(true, true);

clone( [withDataAndEvents] [, deepWithDataAndEvents] )

withDataAndEvents : イベントハンドラやデータを要素と一緒にコピーするかどうかを示すブール値。デフォルトはfalseです。

deepWithDataAndEvents : クローンされた要素のすべての子要素のイベントハンドラとデータをコピーすべきかどうかを示すブール値です。デフォルトでは、この値は第1引数の値(デフォルトはfalse)と一致します。

注意点 .on() は実際にイベントをターゲットにバインドするのではなく、デリゲートしている要素にバインドすることに注意してください。ですから、もしあなたが

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

イベントは実際には #container . をクリックすると .button 要素が発生すると、バブルアップして #container 要素にバブリングされる。 イベントのトリガーとなった要素は .on() のセレクタパラメータで評価され、一致すればイベントハンドラが実行されます。これがイベントデリゲーションの仕組みです。

要素#containerをクローンする場合、イベントと .on() で作ったバインディングを保持するために、イベントとデータでディープクローンする必要があります。

を使っている場合は必要ないでしょう。 .on() の親に対して #container .