给元素绑定事件的一些区别【多次绑定事件问题】

阳光穿透心脏的1/2处 2022-08-06 06:30 228阅读 0赞

$('#table1 tr td textarea').on('click', function () {
    
                $(this).attr('class', 'dyTextAreaEdit').removeAttr('readonly');
            });
            $(document).on('click', '#table1 tr td textarea', function (){
    
                $(this).attr('class', 'dyTextAreaEdit').removeAttr('readonly');
    
            });

这两种方式都可以绑定事件 但是第二种方式对于新增的动态元素 仍然是有效果的,第一种方式的点击事件对新增的元素无效,当然还有其他绑定事件，博主没有一一尝试，这里只提供给大家参考，见谅

今天是15年1月26号,其实绑定事件的方式我尝试了第三种,也就是如下这样：

demo2

$('#div1').on('click','textarea',function(){ 
     			 $(this).attr('class', 'dyTextAreaEdit').removeAttr('readonly');
    	})

只要我们按照on方法 使用三个参数去绑定,动态生成的元素仍然能够绑定成功，也就是$()选择器里面,只要给定一个范围类的选择器,on第二个参数是特定的元素 ,不管是先前绑定还是后期动态生成,都能够绑定上事件

绑定事件需要注意,多次绑定事件,多次绑定会出现意想不到的结果，这点需要注意一下，当下例子里面的点击函数没有影响,但是比如我们将移除readonly属性 换为增加一个dom元素,多次绑定就会出现点击一次 增加多个dom元素,这点需要们注意控制只需要绑定一次事件，今天是15年1月28号，自己写一个特简单的 隔行背景颜色渲染 jquery插件又遇到了多次绑定事件问题。

我们就以上面的例子为例 :绑定事件的时候 先解除绑定然后再绑定：

demo2 我们可以改成这样子：

$('#div1').off('click','textarea').on('click','textarea',function(){ 
    				//这样就是先解除绑定然后再次绑定

//textarea和input不能移除点击事件，我们只能通过禁用textarea和input 去防止点击（同时控制样式即可）

})