jQuery嵌套事件绑定时，如果逻辑处理不当，有时会出现事件重复绑定的问题，例如下面的例子。

点击“添加文本框”按钮时，会在div中新增一个textarea，同时使用bind方法为class为demo-textarea的元素绑定click事件

相关代码如下所示：

<script>
$(document).ready(function(){
  $("#add-btn").on("click",function(){
    $("#first-p").after('<p id="demo-p"><textarea class="demo-textarea">点击textarea弹出提示</textarea></p>');
    $("#demo-div").find(".demo-textarea").bind("click",function(){
      alert("Textarea Clicked!");
    });
  });
});
</script>

<div id="demo-div" style="border:solid 1px;padding:5px 10px;">
<p id="first-p">jQuery事件重复绑定Demo，点击&ldquo;新增文本框&rdquo;按钮追加textarea；<br />
点击textarea弹出提示，重复添加时会重复绑定</p>
<p><button id="add-btn" title="点我添加一个文本框">添加文本框</button></p>
</div>

事件重复绑定到的简单解决方法：

事件绑定嵌套时，内层事件绑定前执行ubind方法解除绑定，上例中的代码变更为：

<script>
$(document).ready(function(){
  $("#add-btn").on("click",function(){
    $("#first-p").after('<p id="demo-p"><textarea class="demo-textarea">点击textarea弹出提示</textarea></p>');
    $("#demo-div").find(".demo-textarea").unbind("click").bind("click",function(){
      alert("Textarea Clicked!");
    });
  });
});
</script>

代码修改后，效果如下：

实际上，上例使用下面的代码更为妥当：

<script>
$(document).ready(function(){
  $(document).on("click", "#demo-div .demo-textarea", function(){
    alert("Textarea Clicked!");
  });
  $("#add-btn").on("click", function(){
    $("#first-p").after('<p id="demo-p"><textarea class="demo-textarea">点击textarea弹出提示</textarea></p>');
  });
});
</script>

效果如下：

本文链接：http://bookshadow.com/weblog/2014/08/21/jquery-duplicate-bind-demo-and-solution/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

如果您喜欢这篇博文，欢迎您捐赠书影博客： ，查看支付宝二维码