为了让网页更加生动有趣，动态的展现给用户。添加事件必不可少，今天我来写下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（）。
多么波折的发展。。。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
