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

问题引出：
事件委托是一种非常常用的事件解决方案，也是很多人推荐作为首选的解决方案（事件委托有什么好处，为何推荐，跟本文要说的内容无关，可自行百度）。我们在事件处理的时候可能会这么用$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与on连用无效的问题相关推荐

jquery事件委托_jQuery事件委托
jquery事件委托 jQuery使JavaScript中的事件处理变得容易. 但是,定义的事件处理程序越多,使用的内存就越多,最终可能会降低性能并导致UI变慢. 本文探讨事件委托如何帮助防止这种情况 ...
jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法
jquery 列表hover效果 <ul class="list"><li class="item"><span>1< ...
html5 点击事件委托,jquery事件委托
一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...
Jquery事件委托之Safari
什么是事件委托事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...
09 jQuery事件委托小米购物车
小米购物车 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
原生JS及jQuery中事件委托的写法
在绑定节点事件处理程序时遇到的问题: 每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间. 采 ...
Mr.J-- jQuery学习笔记(十一)--事件委托
jQuery事件委托事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运 ...
JQuery --- 第三期 (jQuery事件相关)
个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta char ...

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

jquery事件委托off与on连用无效的问题相关推荐

最新文章

热门文章