jquery事件委托off与on连用无效的问题

原创 2015年11月20日 18:37:47

问题引出:
事件委托是一种非常常用的事件解决方案,也是很多人推荐作为首选的解决方案(事件委托有什么好处,为何推荐,跟本文要说的内容无关,可自行百度)。我们在事件处理的时候可能会这么用$selector.off(相关参数).on(相关参数)以防止重复委托事件。结果发现这种使用方式并不能起到防止重复委托事件的效果。先来个例子

<body>
    <div id='test'>
        <div id="subTest"></div>
    </div>
</body>

这里subTest所在元素是一个动态创建的元素。然后我们希望在创建subTest的时候,给subTest绑定一个点击事件,假设是通过

create=function()
{ 
    $("#test").html("<div id='subTest'></div>");
    $("#test").off().on("click","#subTest",function()
    {
        console.log("事件绑定");
    });
};

如果调用两次create,再点击subTest,会发现点击一次,而控制台连续输出两次“事件绑定”,即off并未解除委托的事件。
问题解决:
1、在销毁subTest的时候,test也一起销毁,这样被委托到test的事件会跟着test的销毁而解除。这样只要在 下次调用create之前,先创建好test,并保证在事件委托前,test在页面是存在的即可
2、在创建subTest的时候,给subTest添加onclick属性,即上面
$("#test").html("<div id='subTest'></div>")这句代码改为
$("#test").html("<div onclick='yourFunction()' id='subTest'></div>")然后定义一个全局的yourFunction函数即可

jquery的off方法,让onclick失效

记录: $(".xxx").off("click"); off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。 off()函数主要用于解除由on()函数绑定的事...
  • hgg923
  • hgg923
  • 2016年12月26日 16:23
  • 1378

jq新版事件绑定.on()、解绑事件off()用法详解

jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM元素并不能响应之前绑定的事件! 旧版本的...
  • gao497278979
  • gao497278979
  • 2014年08月24日 15:30
  • 16937

js 导致事件委托触发事件失败的一个问题

本文描述了利用js事件委托机制或jQuery的on()方法绑定事件,代码写的没问题,然而又无法触发事件,导致事件触发失败的一个问题与原因,及其解决的方法:利用事件委托绑定事件时的父元素或祖先元素必须是...
  • k358971707
  • k358971707
  • 2017年06月03日 13:21
  • 534

Jquery 在ios上事件委托失效?

最近做的一个项目,开发H5页面,然后适配运行在andriod和ios上。 一个查看原卷的弹框,点击按钮后会弹出一张居中的图片,并且有全屏遮罩。现在的需求是点击遮罩弹框关闭。外面的div是遮罩,点击事件...
  • qq_35800306
  • qq_35800306
  • 2017年01月12日 15:09
  • 1374

jquery on()绑定事件无效

今天在做项目的过程中遇到了jquery 动态生成的元素绑定事件的问题。 首先我目前所了解的是 (1)用bind或者直接给元素加事件(例如click)这种的是对于页面初始化就有的元素 (2...
  • helloqqdd
  • helloqqdd
  • 2017年04月27日 20:05
  • 299

jquery事件委托off与on连用无效的问题

jquery事件委托off与on连用无效的问题: 问题引出: 事件委托是一种非常常用的事件解决方案,也是很多人推荐作为首选的解决方案(事件委托有什么好处,为何推荐,跟本文要说的内容无...
  • yu766588220
  • yu766588220
  • 2015年11月20日 18:37
  • 2217

JQuery设置onclick事件无效的处理方法

//必须先清除原有的事件 $("#" + ctrId).attr("onclick", "");  //再重新绑定新的事件  $("#" + ctrId).bind("click", funct...
  • JimFire
  • JimFire
  • 2012年05月23日 23:41
  • 15099

jQuery高级事件---on、off、one和事件委托

on、off、onejQuery1.7 以后推出了.on()和.off()方法,替代之前的方法。on/off整合了bind、unbind、事件委托等方法 on替代bind方法on可以替代bind方法...
  • twilight_karl
  • twilight_karl
  • 2017年06月16日 16:48
  • 679

javascript 事件委托 和jQuery事件绑定on、off 和one

一. 事件委托 什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。 而在jQu...
  • liuxin191863128
  • liuxin191863128
  • 2015年05月14日 17:06
  • 1040

解决jQuery使用append添加的元素事件无效的方法

jquery api官方的例子在新增的元素上添加事件 $(document).on("click",'#lyysb a',function(){ if(!$(this).hasClass('cur...
  • haoaiqian
  • haoaiqian
  • 2017年03月17日 10:09
  • 9502
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery事件委托off与on连用无效的问题
举报原因:
原因补充:

(最多只允许输入30个字)