html再描画後にJquery関数が動作しない

Question

問題：ハンドラをアクティブにするHTML要素を再描画した後にクリックハンドラが動作しない。

jqueryの.sortable（）メソッドを使用してソート可能な子divのリストを持つ親divがあります。これらのdivには、さまざまなアクションが発生するさまざまなクリックハンドラがあります。

jsfiddle：http://jsfiddle.net/GA4Qs/805/

まず、私はそれにHTMLを復元し、キャンセルの後、親のdiv

var original_order = $('#sortable_groups').html() 

内のすべてのhtmlを収集し、再描画の作品

$('#cancel').click(function() { 
     $('#sortable_groups').empty().html(original_order); 
}); 

元の状態です私が望むのとまったく同じですが、キャンセルしてhtmlを再描画すると、クリックハンドラが動作しません。

SOを掘り下げた後、私は「ライブ」イベントに関する古いポストを見つけました。このイベントは.on（「クリック」）イベントにマージされました。私は.click（）の代わりに.on（）ハンドラを使用するようにコードを更新しましたが、残念ながらこれは問題を解決しませんでした。

私の上記のフィドルは、私が抱えている問題を簡素化（しかし、示しています）しています。太字のテキストをクリックすると、健全性の警告が表示されます。 「キャンセル」をクリックすると、クリックでトリガされた健全性の警告が表示されなくなります。

この問題がJqueryのいくつかの側面について私の誤解を招く可能性があると感じていますが、最初はすべてがうまく機能しているように見えますが、コンソールにエラーはありません。 。動的な要素のための委任に

Answer 1

使用

$('#sortable_groups').on('click', '.dg_acc_div' , function(e){ 
     window.alert($(this).html()) 
}); 

フィドル：重複するためhttp://jsfiddle.net/GA4Qs/807/