javascript - 当我们为元素设置新的 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) 之后为 #d1 设置点击事件/g, "letter")) 因为如果设置了事件，我现在不在执行时。
您可以在 JSBin 上尝试示例

感谢回复，live()是一个非常有用的功能。

Answer 1

演示: http://jsbin.com/aqono4/4/edit

如果您不确定元素的状态，您始终可以使用 live 来绑定(bind)您的事件:

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

与 live method 绑定(bind)的事件，仍将适用于在最初调用代码之后找到的实例。

演示: http://jsbin.com/aqono4/4/edit