解决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 相关文章推荐
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
js转义字符介绍
Nov 05 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
js获取页面description的方法
May 21 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 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
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
django 消息框架 message使用详解
2019/07/22 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
如何完美的建立一个python项目
2020/10/09 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
运动会广播稿60字
2014/01/15 职场文书
大学生英语演讲稿
2014/04/24 职场文书
领导工作表现评语
2015/01/04 职场文书
人民的好儿女观后感
2015/06/18 职场文书
法制教育主题班会
2015/08/13 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers