解决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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 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
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
Laravel 5 学习笔记
2015/03/06 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
php表单处理操作
2017/11/16 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
企业门卫岗位职责
2013/12/12 职场文书
医药销售求职信范文
2014/02/01 职场文书
清扬洗发水广告词
2014/03/14 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015年采购工作总结
2015/04/10 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server