解决Jquery向页面append新元素之后事件的绑定问题


Posted in Javascript onMarch 16, 2015

我先看jq api文档没有找到方法,无果只好到网上找些资料,果然找到live方法。

其实很简单:

解决Jquery向页面append新元素之后事件的绑定问题

1.这是项目要求达到的效果,当我没用live事件,只用了简单的hover事件时:hover事件没有加载进来,没有我想要的边框效果,效果图如下

解决Jquery向页面append新元素之后事件的绑定问题

/*经过用户技能标签增加样式*/


$(function(){
 



$(".s-edited").hover(function(){


   

 $(this).toggleClass("borderd");



})


})

2.当我用了live之后,效果达到了,如下图:

解决Jquery向页面append新元素之后事件的绑定问题

代码如下:

/*经过用户技能标签增加样式*/


$(".s-edited").live("hover",function(){



$(this).toggleClass("borderd");


})

我仔细的看了一下关于live的介绍,

给所有当前以及 将来 会匹配的元素绑定一个事件处理函数(比如hover事件)。也能绑定自定义事件。

PS:我是新手菜鸟,大神勿喷!

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
Js切换功能的简单方法
Nov 23 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
jquery中radio checked问题
Mar 16 #Javascript
jquery中JSON的解析方式
Mar 16 #Javascript
浅谈js中的闭包
Mar 16 #Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 #Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 #Javascript
JavaScript中的DSL元编程介绍
Mar 15 #Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 #Javascript
You might like
php5 图片验证码实现代码
2009/12/11 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
Laravel 队列使用的实现
2019/01/08 PHP
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
jqTransform美化表单
2015/10/10 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
微信小程序实现日历签到
2020/09/21 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python hashlib模块加密过程解析
2019/11/05 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
青春演讲稿范文
2014/05/08 职场文书
德育标兵事迹材料
2014/08/24 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
会议简报格式范文
2015/07/20 职场文书
python基础之文件处理知识总结
2021/05/23 Python
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript