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

来源：互联网发布：手机网络主播招聘编辑：程序博客网时间：2024/05/16 18:29

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

0 0