关闭

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

标签: jqueryoffon
1849人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9150次
    • 积分:233
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条