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