jQuery html（）メソッドは、スワップ後に内側のhtml内の要素にイベントをバインド解除しますか？

Question

私は興味深い問題に遭遇しました。私のサイトでは、特定のリンク上をホバリングするときにコンテンツを動的に交換します。今、この#newcontent部分の内側に、私はこのようなクリックイベント割り当てた<button> -elementあり

$('#box').html($('#newcontent').html()); 

：：これは、のようなものによって達成される（$(document).ready() -function内部は）

$("button#buttonName").click(function(){ 
    $("div#containerName").toggleClass("hidden"); 
    } 

hiddenは、表示を行っているCSSクラスです：なしマジック。 #containerNameはの外側にあるです。ボタンを含む要素と変更する構造を含む要素の両方がhtml()で変更されています。

構造のモックアップこの時点で

<div id="somethingthatwhenhoveredoverwillswapthecontent">Hover over me!</div> 

<div id="box">Change me!</div> 

<div id="newcontent" class="hidden">I am renewed! 
    <button id="buttonName">Show the weird box at the bottom</button> 
</div> 

<div id="containerName" class="hidden"> 
    I am content that is only shown when the button is clicked 
</div> 

だから何が起こるかは、このです：ページがロードされ、スクリプトを交換するコンテンツが正常に動作しますが、ボタンが、それは、テストの理由でイベントをクリックします発生しませんalert('whatever');も与えていない。 html（）がコンテンツを<div id="newcontent">から<div id="box">にスワップすると、イベントはバインドされていません（私は疑いがあります）。

これは私がコンセプトを理解していないのですか、それとも全体的なアプローチが間違っているのでしょうか？

Answer 1

背景jQueryはオリジナルの「コピー」を作成するのではなく、新しいDOM要素を作成しています。このため、元のイベントハンドラはありません。あなたは手動であなたのhtml()コールと一緒にハンドラを再割り当てすることができ、またはあなたがこのようなイベントを追加するdelegate()を使用することができます。

$("#box").delegate("#buttonName", 'click', function(){ 
    $("#containerName").toggleClass("hidden"); 
});