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时它再次点火。我理解为什么会有这种行为，但如何解决呢？在我的代码中，我无法在#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!");
    });
});

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

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

Answer 2

您应该使用live()方法进行绑定。

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

Answer 3

正如GvS所说，绑定事件。当你不需要它时，你可以解开。

当我们为元素设置新的html时，如何保存事件处理程序？

3 个答案: