Как сохранить обработчики событий, когда мы устанавливаем новый 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, но когда мы щелкаем по .wrap, оно снова не срабатывает. Я понимаю, почему у него такое поведение, но как его решить?
В моем коде я не могу установить событие клика для #d1 после $("#cont").html($("#cont").html().replace(/text/g, "letter")), потому что я не могу теперь во время выполнения, если событие было установлено.
Вы можете попробовать пример на JSBin

Спасибо за ответы, live () - очень полезная функция.

Answer 1

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

Если вы не уверены в состоянии своих элементов, вы всегда можете использовать live, чтобы связать свои события:

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

События, связанные с живым методом , будут по-прежнему применяться к экземплярам, ​​найденным после , когда первоначально вызывается код.http://jsbin.com/aqono4/4/edit

Answer 2

Как сказал GvS, свяжите событие.Когда вам это не нужно, вы можете отменить привязку.

Answer 3

Вы должны связать, используя live() метод.

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