Jquery的on方法绑定事件

$(selector).on('events',fn)

events：一个或多个用空格分隔的事件类型
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数

1.on方法可以一次性绑定多个事件

 <div style="height: 100px; width: 100px;background-color: red;">DIV样式</div><ul><li>1</li><li>2</li></ul>

$('div').on({mouseenter: function() {$('div').stop();$('div').animate({width: '150px',height: '150px'}, 1000)},mouseleave: function() {$('div').stop();$('div').animate({width: '80px',height: '80px'}, 1000)}})

2.很多时候元素是动态生成的，如果在这些元素生成之后没有重新获取一次元素再绑定事件，那么新生成的元素就不会有绑定的事件，而on方法可以直接给这些元素动态绑定事件，不需要每次生成都再去获取一次元素

 $('li').click(function() {console.log($(this).index());})$('ul').append($('<li >3</li>'))// 动态插入后点击打印不了<li >3</li>下标console.log("-----------分界线-----------");// 使用on方法就可以$('ul').on('click', 'li', function() {console.log($(this).index());})$('ul').append($('<li >4</li>'))$('ul').append($('<li >5</li>'))$('ul').append($('<li >6</li>'))

Jquery的on方法绑定事件相关推荐

JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
【JQuery】on/off 绑定事件和解绑事件
前言 on 绑定事件.off 解绑事件 on 添加事件.off 删除事件 JQuery on() 方法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 ...
对jquery新增加的class绑定事件 jquery 对相同class 绑定事件
当页面加载时,就会注册所有的事件,后面通过jquery新增的内容(<div class="item"></div>),再对新增的添加事件$(".i ...
解决jquery的多次绑定事件
最近在写一个网站的过程中,混合使用了updatepanel与jquery,发现只要updatepanel刷新一次,执行事件的次数就会加一,将代码改为如下解决: $("#btnLocation ...
jQuery：删除元素绑定事件
$('#page21MainContain').css("pointer-events", "none");
【js】绑定事件的两种方法
方法一: 为需要绑定事件的标签添加一个属性onclick 代码实现: <input type="button" value="测试按钮" onclick= ...
ajax传向前台的html代码里又有事件的时候，绑定事件失败解决方法
为动态添加的元素绑定事件有以下几种方式: 1.delegate():向匹配元素的当前或未来的子元素附加一个或多个事件处理器 $(selector).delegate(childSelector,eve ...
jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
jq父级绑定事件的意义_用jQuery.delegate()将事件绑定在父元素上面
1.先看看官方的示例: $(document).ready(function(){ $("div").delegate("button","click ...

Jquery的on方法绑定事件

Jquery的on方法绑定事件相关推荐

最新文章

热门文章