jQuery on()方法是官方推荐的绑定事件的一个方法。
- $(selector).on(event,childSelector,data,function,map)
由此扩展开来的几个以前常见的方法有.
- bind()
- $("p").bind("click",function(){
- alert("The paragraph was clicked.");
- });
- $("p").on("click",function(){
- alert("The paragraph was clicked.");
- });
- delegate()
- $("#div1").on("click","p",function(){
- $(this).css("background-color","pink");
- });
- $("#div2").delegate("p","click",function(){
- $(this).css("background-color","pink");
- });
- live()
- $("#div1").on("click",function(){
- $(this).css("background-color","pink");
- });
- $("#div2").live("click",function(){
- $(this).css("background-color","pink");
- });
以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。
tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。
- $(document).ready(function(){
- $("p").on("click",function(){
- $(this).css("background-color","pink");
- });
- $("button").click(function(){
- $("p").off("click");
- });
- });
tip:如果你的事件只需要一次的操作,可以使用one()这个方法
- $(document).ready(function(){
- $("p").one("click",function(){
- $(this).animate({fontSize:"+=6px"});
- });
- });
trigger()绑定
- $(selector).trigger(event,eventObj,param1,param2,...)
- $(document).ready(function(){
- $("input").select(function(){
- $("input").after(" Text marked!");
- });
- $("button").click(function(){
- $("input").trigger("select");
- });
- });
多个事件绑定同一个函数
- $(document).ready(function(){
- $("p").on("mouseover mouseout",function(){
- $("p").toggleClass("intro");
- });
- });
多个事件绑定不同函数
- $(document).ready(function(){
- $("p").on({
- mouseover:function(){$("body").css("background-color","lightgray");},
- mouseout:function(){$("body").css("background-color","lightblue");},
- click:function(){$("body").css("background-color","yellow");}
- });
- });
绑定自定义事件
- $(document).ready(function(){
- $("p").on("myOwnEvent",function(event, showName){
- $(this).text(showName +"! What a beautiful name!").show();
- });
- $("button").click(function(){
- $("p").trigger("myOwnEvent",["Anja"]);
- });
- });
传递数据到函数
- function handlerName(event)
- {
- alert(event.data.msg);
- }
- $(document).ready(function(){
- $("p").on("click",{msg:"You just clicked me!"}, handlerName)
- });
适用于未创建的元素
- $(document).ready(function(){
- $("div").on("click","p",function(){
- $(this).slideToggle();
- });
- $("button").click(function(){
- $("<p>This is a new paragraph.</p>").insertAfter("button");
- });
- });
相关推荐
jquery on方法支持事件明细,
教你如何给 jQuery on方法绑定的函数传递参数,代码如下: 代码如下: $(“.loadingFlower”).on(“click”,”,{name:”123″,id:”234″,tel:”345″},callback) function callback(event){ console.log(event...
下面小编就为大家带来一篇Jquery on方法绑定事件后执行多次的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
基于jquery 的开关按钮小插件,配置简单,具体用法可以看我的博客 https://blog.csdn.net/lianzhang861/article/details/80415991
jQuery on()方法是官方推荐的绑定事件的一个方法。 $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The ...
本文主要介绍jQuery中on方法使用注意事项。具有很好的参考价值,下面跟着小编一起来看下吧
可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...
js与jquery实时监听输入框值的oninput与onpropertychange方法.docx
本文实例分析了jQuery on()方法的用法。分享给大家供大家参考。具体分析如下: 一、jQuery on()方法的使用: on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如”...
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法...
主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下
dependsOn, 用于处理表单域依赖项的jQuery插件 依赖 一个jQuery插件,用于处理表单域依赖项的处理。返回 $( 对象的名称。示例演示工具安装使用npm的npm install --save jquery-depends-on带 Bower的
自从jQuery添加了on()和off()方法之后,基本跟事件有关的操作我不会再使用其他诸如$(‘xxx’).click(function(){});之类的了。 不过jQuery的api里面没有说on里面到底可以绑定多少个事件,今天看jQuery1.8.3的源码...
jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友参考下