要素の新しいhtmlを設定すると、イベントハンドラを保存する方法は？

Question

私は、単純なHTMLマークアップを持っている：

<div id="cont">Some text here 
    <div class="wrap" style="border: 1px solid black;display: inline;"> block element here 
    </div> and another text</div> 

とjQueryコード：

$(function(){ 
    $(".wrap").click(function(){ 
     $("#cont").html($("#cont").html().replace(/text/g, "letter")); 
    alert("Click!"); 
    }); 
    $("#d1").click(function(){ 
    alert("#d1 clicked!"); 
    }); 
}); 

私はそのクリックイベントは、あなたが#d1 div要素によってクリックされた任意の時間を発射することを期待し、我々は.wrapによってクリックされたときそれはもう一度火を消す。なぜそれがそのような振る舞いを持っているのか理解していますが、それをどう解決するのですか
$("#cont").html($("#cont").html().replace(/text/g, "letter"))の後に私のコードで#d1のクリックイベントを設定することができません。なぜなら、イベントが設定されていれば実行時にはいないからです。
例を試すことができますlive()は非常に便利な機能です。live()は非常に便利な機能です。live()は非常に便利な機能です。live()

Answer 1

DEMO：http://jsbin.com/aqono4/4/edit

あなたの要素の状態が不明な場合は常にあなたのイベントバインドするliveを使用することができます。live methodが結合した

$(function(){ 
    $(".wrap").live('click', function(){ 
     $("#cont").html($("#cont").html().replace(/text/g, "letter")); 
     alert("Click!"); 
    }); 
    $("#d1").live('click', function(){ 
     alert("#d1 clicked!"); 
    }); 
}); 

イベントを、しますのコードを最初に呼び出すと、のインスタンスにも適用されます。

DEMO：GVSが言ったようにhttp://jsbin.com/aqono4/4/edit

Answer 2

live()メソッドを使用してバインドする必要があります。

$(function(){ 
    $(".wrap").live("click", function() { 
    // .... 

Answer 3

、イベントをバインドします。あなたがそれを必要としないときは、バインドを解除することができます。