归档 2014年8月21日

jQuery事件重复绑定示例及解决方法

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

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

jQuery事件重复绑定Demo,点击“新增文本框”按钮追加textarea
点击textarea弹出提示,重复添加时会重复绑定
第n次新增之后,textarea在点击时会重复弹出n次提示。

相关代码如下所示:

<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!"); ...

继续阅读

昨天

明天

归档