jquerybind(jquery bind失效)
AB资源网 2023-04-18 13:24 80 浏览 0 评论
本文目录一览:
- 1、jQuery中bind函数用法
- 2、jquery绑定点击事件的方法
- 3、jQuery中bind()方法中的参数
- 4、jQuery事件绑定方法bind,live,delegate和on的区别
- 5、Jquery中bind和live的区别
- 6、jquery中的bind,live,delegate和on方法的区别是什么
jQuery中bind函数用法
问题1:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; " /
titleSimple JQuery/title
script type="text/javascript" src="https://www.wanyucheng.com/news/66/js/jquery.js"/script
script type="text/javascript"
$(function(){
$('#mybtn').bind('click', {a : 'hello', b : 'world'}, myFun);
});
function myFun(e) {
alert(e.data.a);
alert(e.data.b)
}
/script
/head
body
input type="button" id="mybtn" value="Click me." /
/body
/html
如上面例子,可以传递多个参数。
-------------------------------------------------------
问题2:
$('pTest/p').appendTo('.inner');
$('.inner').append('pTest/p');
上面这个是append()和appendTo()区别,应该一目了然了吧?
而appendChild()不是jquery的方法,而是javascript原生的方法。
append和appendChild的关系是:
其实几乎一样,append就是调用appendChild实现的,只是在append前,做一个简单判断。下面贴下jquery的源代码:
append: function() {
return this.domManip(arguments, true, function( elem ) {
if ( this.nodeType === 1 ) {
this.appendChild( elem );
}
});
}
--------------------------------------------------
问题3:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleSimple JQuery/title
script type="text/javascript" src="https://www.wanyucheng.com/news/66/js/jquery.js"/script
script type="text/javascript"
$(function(){
$('#mybtn').bind('click', myFun);
});
function myFun() {
alert($(this).attr('value'));
}
/script
/head
body
input type="button" id="mybtn" value="Click me." /
/body
/html
第3个问题不是看的很明白?直接调用应该可以呀,看看这个例子是不是你想要的?
---------------------------------------------------
问题4:网上有很多,查看参考链接这个吧。
jquery绑定点击事件的方法
jQuery绑定点击事件可以使用其绑定事件函数
jquery中四个事件绑定方式(bind,live,delegate,on)
1、bind()
简要描述
bind()向匹配元素添加一个或多个事件处理器。
使用方式
$(selector).bind(event,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).bind("click",data,function);
多事件处理:
1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独
绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。
2、live()
简要描述
live() 向当前或未来的匹配元素添加一个或多个事件处理器;
使用方式
$(selector).live(event,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).live("click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).live("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).live({event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。
3、delegate()
简要描述
delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).delegate(childselector,"click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.4.2及其以上版本;
4、on()
简要描述
on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).on(event,childselector,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).on("click",childselector,data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
四种方式的异同和优缺点
相同点:
1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;
比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;
2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以
用来代替live()函数,live()函数在1.9版本已经删除;
3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
总结
如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法
jQuery中bind()方法中的参数
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。其语法为:
$(selector).bind(event,data,function)
参数说明如下:
event:规定添加到元素的一个或多个事件。必需。
data: 规定传递到函数的额外数据。可选。
function: 规定当事件发生时运行的函数。必需。
示例如下:
// 当点击鼠标时,隐藏或显示 p 元素:
$("button").bind("click",function(){
$("p").slidetoggle();
});
jQuery事件绑定方法bind,live,delegate和on的区别
bind是用来绑定一个或多个事件的,live其实bind的一个加强版,用来绑定通过JavaScript或者jQuery添加的DOM元素事件,其语法结构是一样
123456$("p").bind("mouseenter mouseleave",function(){alert("ok");})$("p").live("mouseenter mouseleave",function(){alert("ok");})
delegate用于事件委托,也是绑定过JavaScript或者jQuery添加的DOM元素事件。
123$("div").delegate("p","click",function(){alert("p");})
点击div下面的P执行alert;
而on是在1.7之后新增的,是把bind,live,delegate全部合并在一起了,
123$("div").on("click","p",function(){ alert(1); })
不需要事件委托的时候把P去掉就会变成点击div触发了。
个人建议根据版本来使用,语法其实都差不多,如果你是用1.7版本以上就建议用on,毕竟bind,live,delegate这些将来都会遗弃了,如有错误,请指出。顺便吐槽一下楼上的回答,不走心啊
Jquery中bind和live的区别
以click事件为例
Jquery中绑定事件有三种方法:
1、target.click(function(){});
2、target.bind("click",function(){});
3、target.live("click",function(){});
live方法,只有在click事件发生的时候,才会去检测绑定事件的对象target是否存在,所以live方法可以实现后来新增子元素的事件的绑定。
bind会在事件在绑定阶段bind时就会判断绑定事件的对象target是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。
以下举例。
按钮1会触发bind和live的绑定事件。
按钮2会触发live的绑定事件。不会触发bind的事件,因为绑定click事件的时候按钮2还没有生成。
script type="text/javascript"
$(function () {
$("#btn1").bind("click", function () { alert("bind"); });
$("#btn2").bind("click", function () { alert("bind"); });
$("#btn1").live("click", function () { alert("live"); });
$("#btn2").live("click", function () { alert("live"); })
$("body").append("span id=\"btn2\"按钮2/span")
});
/script
body
span id="btn1"按钮1/span
/body
jquery中的bind,live,delegate和on方法的区别是什么
$(selector).bind(event,data,function)
$(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;$(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).bind("click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。
jquerybind的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于jquery bind失效、jquerybind的信息别忘了在本站进行查找喔。
相关推荐
- 踏入阿里云服务器代理商之门:步骤和技巧 (怎么成为阿里云服务器代理商)
-
作为目前全球更大的云计算服务提供商之一,阿里云在中国市场的份额一直占据领导地位。如果你希望在云计算领域开展业务,成为阿里云服务器代理商可能是个不错的选择。本文将为大家详细介绍具体的步骤和技巧,帮助你成...
- 高性价比,足够优惠! 30美元起,年付美国VPS,值得拥有! (美国vps 年付)
-
近年来,随着互联网的不断发展,越来越多的网站需要使用虚拟主机服务,以提供更加稳定的服务质量和更好的访问速度。而虚拟主机的使用也因此成为了越来越普遍的一种方式。但是,在选择虚拟主机服务时,除了考虑到稳定...
- 评测美国云服务器,推荐性价比高的品牌 (美国云服务器哪个好用)
-
近年来,随着人们对于云计算的需求不断增加,云服务器也逐渐成为了企业、机构和个人等用户参与服务的主要方式之一。而在众多的云服务器品牌中,美国云服务器更是备受欢迎。而对于那些想要评测美国云服务器的用户来说...
- 群晖服务器的登录方法详解 (群晖服务器如何登陆)
-
群晖服务器是一种高效可靠的存储和共享平台,它可以提供非常多的实用功能和服务。但是,在开始使用之前,你需要登录到你的群晖服务器。在本文中,我们将详细讲解群晖服务器的登录方法。一、了解群晖服务器的基本概...
- 紧急通知:CDN服务器可能遇到故障,需及时解决! (cdn服务器可能发生故障)
-
作为一个网站管理员,CDN服务器的重要性我们再清楚不过了。最近,我们收到了来自网络运营商的紧急通知,通知我们CDN服务器可能遇到故障,需要及时解决。CDN服务器,即内容分发网络服务器,是在全球各个位...
- 办公室网络瘫痪!无法连接局域服务器怎么办? (连接不了局域服务器)
-
办公室网络瘫痪是企业中常见的问题之一。一旦网络瘫痪,会影响到员工的工作效率和企业的营运。当你打开电脑,却发现无法连接局域服务器时,这时该如何应对呢?1.检查网络连接检查电缆是否连接正确,网线是否...
- 利润吗?买云主机,能否带来收益? (买云主机能赚)
-
随着互联网的飞速发展,云计算作为一种新型的计算模式,其广泛应用在各个领域之中。其中,云主机服务是云计算的重要组成部分,已经成为很多企业选择托管的首选方式。随着云主机的发展和普及,很多人开始关注,如果购...
- .NET轻松打开FTP服务器文件夹,方便快捷管理文件 (.net打开ftp服务器文件夹)
-
在现代科技的浪潮下,越来越多的企业选择使用云服务器来存储和共享数据。FTP服务器是一个非常有用的工具,它允许用户上传、下载、删除和共享文件。然而,FTP管理文件需要一些特定技能和知识,否则操作可能会变...
- 2023企业服务器版:全面升级,助力企业发展 (2023 企业服务器版)
-
2023年,微软推出了全新的企业服务器版本,旨在为企业用户提供更为稳定、高效的IT系统支持,更好地助力企业发展。随着互联网和信息技术的飞速发展,企业面临着越来越大的信息化压力。如何建设一个高效、稳定...
- 享受超低价格!2023年付VPS,轻松搭建私人网站 (2023便宜年付vps)
-
当今时代,互联网充斥着各种各样的网站,无论是企业还是个人都会拥有一个网站,用来展示自己的产品或者知识。而搭建一个私人网站也是越来越普遍的事情。那么,如何搭建一个便捷而且又不贵的私人网站呢?本文将为大家...
- 回顾2023服务器系统:经典之作还是过时技术? (2023服务器系统)
-
2023年,微软公司推出了WindowsServer2023,这是一款非常成功的服务器操作系统,许多企业和机构使用它进行各种任务和应用程序。然而,随着时间的推移,新技术的发展以及安全漏洞的增加,2...
- 2023 Q3服务器排名发布:领先厂商与新兴品牌争夺冠军 (2023 Q3服务器排名)
-
近年来,随着互联网技术的迅速发展,服务器市场也持续升温。市场上主要的服务器品牌包括戴尔、惠普、联想、IBM等。而在这些老牌企业的竞争下,新兴的服务器品牌也在不停崛起。根据2023Q3服务器排名发布,...
- 「低成本高性能!100g云服务器价格惊喜震撼!」 (100g云服务器价格)
-
低成本高性能!100g云服务器价格惊喜震撼!现今的互联网时代,任何一家公司都需要拥有自己的网站,以便宣传公司产品、服务和品牌。一个高速、可靠的云服务器是每个公司的必备工具之一。就在不久之前,网络服务...
- 1u服务器显卡:强大性能让服务器效率提升 (1u服务器显卡)
-
1U服务器显卡:强大性能让服务器效率提升随着信息技术的飞速发展,人们对数据处理和存储的需求越来越高,尤其对企业级服务器的性能要求也越来越苛刻。随着、大数据、云计算等诸多新技术的不断涌现,服务器的效率...
- 韩国将于2023年推出云服务器服务,助力云计算技术的发展。 (2023韩国云服务器)
-
韩国将于2023年推出云服务器服务,助力云计算技术的发展随着互联网的高速发展,云计算技术已经成为了数字化时代的一项重要技术。云计算技术是一种以互联网为基础,将不同的底层服务封装成云服务器,以便用户可...
你 发表评论:
欢迎- 一周热门
-
-
大网数据:双12秒杀聚惠,湖北100G高防云低至0元/月,湖北独服务器低至210元、200G高防+50Mbps带宽
-
HostYun廉价洛杉矶三网回程CN2 GIA云服务器内测13元/月起(美国原生IP,去程10Gbps防御)
-
HostYun洛杉矶大硬盘云服务器9折22.5元/月起(240G-500G硬盘/1Gbps/10G防御)
-
大网数据、湖北高防云服务器低至39元/月起、湖北高防独服务器低至245元起(200G硬防、金盾+傲盾防CC)
-
樊云香港双程CN2及洛杉矶50G高防三网CN2 GIA云服务器9折22.5元/月起
-
spinservers圣何塞/达拉斯10Gbps带宽高配服务器月付89美元起
-
DogYun新上韩国独立服务器,E5/SSD+NVMe优惠后300元/月,自动化上架
-
tmhhost美国高防云服务器8折_CeRaNetworks机房/三网cn2直连/适合建站
-
高防服务器大网数据湖北独服务器低至210元、200G高防+50Mbps带宽
-
初忆云 – 2020年中云聚惠全场五折 BGP云服务器低至88/年,抓紧上车
-
- 互动交流
- 标签列表
- 最新评论
-
您的文章条理清晰,论述有据,说服力强。您的文章情感真挚,能够触动人心,引起共鸣。https://www.renhehui.com/renhehui/1479.h
沉醉于月色 评论于:08-09虚拟机部署好后跟物理机一样当服务器的,只是它依赖了本地物理机不要关机为前提。对于外网访问内网场景,本地内网搭建服务器后需要提供到互联网上连接访问的,比较简便的
访客 评论于:03-01- 刘中宜 评论于:11-01
- 访客 评论于:06-03
- AB资源网 评论于:05-08
- AB资源网 评论于:11-22
- AB资源网 评论于:11-22
- 頹廢了悲伤 评论于:11-15
- 南风知我意 评论于:11-15
- 心若冰凝 评论于:11-15