divを複製した後、トグルアイコンが機能しないのはなぜですか？

Question

基本的に、私は '月曜日'、 '火曜日'、 'お気に入り'という3つのタブで作業しています。私は心臓であるトグルアイコンを持っています。私が月曜日にアイコンをクリックすると、空の心臓が埋め尽くされてクローンされ、「#fav」タブに追加されます。そこに到達してから、トグルアイコンはまったく機能しません。

私が試してみた：

clone(true, true) 

をしかし、私のためにうまく動作していないようです。私は何かが間違っていることを知っているので、誰かが私を正しい方向に向けることができたら感謝します。

私はこのフィドルを作成しましたので、この問題を体験できます。

https://jsfiddle.net/itsfranhere/nbLLc3L0/15/

Answer 1

イベントリスナーは、動的に作成された要素に添付されていません。 したがって、クリックイベントは[お気に入り]タブの要素では発生しません。

イベントのリスナーを[お気に入り]タブのアンカーエレメントにアタッチするか、イベントの伝播を使用してイベントをキャプチャする必要があります。

$('div.tab-pane').on('click', '.favorite', function(e) { 
// code here 
}