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
  • 961

浅谈jQuery代码优化之事件委托(事件绑定)——bind()|live()|delegate()|on()|off()|one()方法

jQuery 1.7开始,on()方法提供绑定事件处理程序所需的所有功能,是 bind()、live() 和 delegate() 方法的新的替代品。live() 方法在 jQuery 版本 1.7 ...

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

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

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

on、off、onejQuery1.7 以后推出了.on()和.off()方法,替代之前的方法。on/off整合了bind、unbind、事件委托等方法 on替代bind方法on可以替代bind方法...

jquery的on、off、one、bind、delegate、live、die绑定事件方法研究

off用于移除on方法绑定的事件,one方法绑定的事件只会被触发一次,live、die方法在1.9的版本中被移除。...

jQuery事件-绑定.on()和解绑.off()

事件的绑定:on() 基本用法:.on( events ,[ selector ] ,[ data ] ) 事件的解绑:off() 基本用法:.off( events)...

Jquery的on,off事件详解,如何利用命名空间来解绑特定的事件

最近在学习写一个基于jquery的js插件时,因为需要用到键盘按键事件,所以就用了bind的方法去绑定元素事件。可用的时候发现,在绑定事件和解绑事件时bind的方法无法满足我的需求。...

jquery中动态增加select,事件无效问题

近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用。    查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器。而live事件:为当前或未来...

JQ高级事件之on、off、one

看了李炎恢老师的视频,这三个方法是可以代替之前的绑定和事件委托的,之前的笔记是用来作为铺垫,方便这次的学习! 我现在前面记录下我们原先的事件绑定 普通的绑定 .bind 普通的解绑.unbind...

Using jQuery .on() and .off()

我懒得翻译了,直接copy过来。 作者blog地址:http://www.andismith.com/     With the release of jQuery 1.7 on Nove...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery事件委托off与on连用无效的问题
举报原因:
原因补充:

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