解决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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
jquery 的 $("#id").html() 无内容的解决方法
Jun 07 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
js图片预加载示例
Apr 30 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
13个PHP函数超实用
Oct 21 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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
PHP 编写大型网站问题集
2010/05/07 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
ext jquery 简单比较
2010/04/07 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python操作xml文件详细介绍
2014/06/09 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis