解决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中this关键字使用方法详解
Mar 08 Javascript
用javascript自动显示最后更新时间
Mar 15 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
javascript的BOM
May 03 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
javascript实现留言板功能
Feb 08 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
Prototype String对象 学习
2009/07/19 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python读写二进制文件的方法
2015/05/09 Python
python字典操作实例详解
2017/11/16 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
深入分析python 排序
2020/08/24 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
销售员个人求职的自我评价
2014/02/10 职场文书
十八大演讲稿
2014/05/22 职场文书
网聊搭讪开场白
2015/05/28 职场文书