博客列表 >jQuery中事件添加与删除on()与off()

jQuery中事件添加与删除on()与off()

zhihuanwang的博客
zhihuanwang的博客原创
2017年12月21日 22:30:06729浏览

    为了让网页更加生动有趣,动态的展现给用户。添加事件必不可少,今天我来写下jQuery关于这方面的内容,举个简单的案例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script src="js/jquery-3.2.1.min.js"></script>    <title>jQuery中事件添加与删除on()与off()</title>    <script> $(document).ready(function () { $("<div></div>").appendTo('body').css('width','200').css('background-color','red').css('height','200').on('click',function () { $(this).css('background-color','skyblue')            }).on('mouseleave',function () { $(this).html('jQuery是一个很好的JS库')            })//            $('div').off('mouseleave') })    </script></head><body></body></html>

添加事件其实还可以:

$('input').click(function () {    //处理代码});//或者是$('.clickme').bind('click', function() {    // Bound handler called.});



这两个方法对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定事件。

用live可以解决这个问题:

$('.clickme').live('click', function() {   // Live handler called.});


即使是在后面动态插入的元素,也会被绑定事件,

$('body').append('<div class="clickme">Another target</div>');

问题:使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,如,当点击一个按钮时,此按钮所绑定的事件会并执行n遍。

解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。比如:

//先通过die()方法解除,再通过live()绑定$("#selectAll").die().live("click",function(){    //事件运行代码});//先通过die()方法解除,再通过live()绑定$("#selectAll").die().live("click",function(){    //事件运行代码});


然而尴尬的是jQuery 1.7以后就不支持了As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). - .live() | jQuery API Documentation

差不多意思是:

从jQuery 1.7开始,.live()方法已被弃用。使用.on()添加事件处理。老版本的jQuery用户应该优先使用.delegate().live()。

多么波折的发展。。。




声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议