Jquery向页面append新元素之后,如何解决事件的绑定问题?
今天有get到一个新知识点,就是当我们向页面添加新的元素之后,加载之前的函数方法就对新元素失效了,下面我来说说如何解决这个问题的?
我先看jq api文档没有找到方法,无果只好到网上找些资料,果然找到live方法。
其实很简单:
1.这是项目要求达到的效果,当我没用live事件,只用了简单的hover事件时:hover事件没有加载进来,没有我想要的边框效果,效果图如下
/*经过用户技能标签增加样式*/
$(function(){
$(".s-edited").hover(function(){
$(this).toggleClass("borderd");
})
})
2.当我用了live之后,效果达到了,如下图:
代码如下:
/*经过用户技能标签增加样式*/
$(".s-edited").live("hover",function(){
$(this).toggleClass("borderd");
})
我仔细的看了一下关于live的介绍,
给所有当前以及 将来 会匹配的元素绑定一个事件处理函数(比如hover事件)。也能绑定自定义事件。
PS:我是新手菜鸟,大神勿喷!
Jquery向页面append新元素之后,如何解决事件的绑定问题?的更多相关文章
- 解决Jquery向页面append新元素之后事件的绑定问题
/*经过用户技能标签增加样式*/ $(".s-edited").live("hover",function(){ $(this).toggleClass(&qu ...
- 【WEB】jQuery获取页面回滚或跳转事件
1.效果: 2.Jquery: //记得引入jquery.min.js <script type="text/javascript"> $(function(){ wi ...
- 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery在页面加载完成后再append的元素事件无效问题
最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...
- 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法
今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
- Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
随机推荐
- CSDN处理问题神速,顶你,为你点32个赞!
今天10点左右发表了一篇文章,发表之后.文章状态待审核,博文首页不能显示文章,例如以下图所看到的: 于是果断给官网发了第一封Email.10点19分.CSDN给予回复,内容例如以下: 尊敬的用户您好: ...
- Java基础之hashCode方法具体解释
想要明确hashCode的作用,必须要先知道java中的集合.(不明确的请看Java基础之集合框架具体解释(二)List篇和Java基础之集合框架具体解释(三)Set篇) Java中的Collecti ...
- 《Effective C++ 》学习笔记——条款12
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- java 工厂方法模式简单实例
工厂方法模式:也叫工厂模式,属于类创建型模式,工厂父类(接口)负责定义产品对象的公共接口,而子类工厂则负责创建具体的产品对象. 目的:是为了把产品的实例化操作延迟到子类工厂中完成,通过工厂子类来决定究 ...
- luogu2149 [SDOI2009] Dlaxia的路线
题目大意 在一个无向图中,定义两个点s,t的最短路径子图为一个极大边集,对于该边集内的所有有向边e,总存在一条起点为s,终点为t且经过边e的路径,使得该路径长度为s到t的最短路径长度.现给出一个无向图 ...
- 在MTK平台里,,函数kal_prompt_trace起什么作用???Kal_prompt_trace的参数有表示什么?
在MTK平台里,,函数kal_prompt_trace起什么作用???Kal_prompt_trace的参数有表示什么?一直弄不明白,但是很多函数的开头就是这个函数,,而且一般有三个参数-- kal_ ...
- bzoj3047:Freda的传呼机&&bzoj2125: 最短路
完结撒花!!!!!!!!!!! 最后一题填坑1A仙人掌WWWWWWW我真流弊 首先把环拆开,环中每一个点连向环的根,然后搞LCA,答案就是套路的d[x]+d[y]-d[lca]*2 然后就可以发现,其 ...
- golang import all 类似python import * 效果
import "io/ioutil" func main() { content, err = iotuil.ReadFile("somefile.txt") ...
- hdoj--5625--Clarke and chemistry(枚举)
Clarke and chemistry Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- sublime -text 删除已安装插件
按ctr+shift +p然后输入remove 回车,再输入要删除的插件名