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失效解决方法 >>>>>>>>>>>>>>>>>>> ...
随机推荐
- Mac下OpenCV开发
1. 环境搭建 a) 安装Homebrew i. 下载地址:http://github.com/mxcl/homebrew/tarball/maste ...
- centos7 安装vsftpd的步骤
感觉非常坑,依照网上说的没一个都測试了,可一直都报错. 不断的又一次安装不下10次,最后一次最终測试出了正确的方法. #官网配置说明## https://security.appspot.com/vs ...
- 豆瓣 jsonp 请求数据 并分页
豆瓣分页 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...
- [Cypress] Stub a Post Request for Successful Form Submission with Cypress
In this lesson well stub a POST request and use Cypress commands to fill in and submit a form. We’ll ...
- SQL Server 2012内部原理及故障排除(专栏)
PROFESSIONAL SQL SERVER® 2012 INTERNALS AND TROUBLESHOOTING一书(可从这里下载).认为内容非常不错.自己也想对SQL Server 2012有 ...
- CAS 4.0 配置开发手冊
1 下载 地址http://downloads.jasig.org/ cas-server-4.0.0-release.tar.gz cas-client-3.3.3-release.tar.g ...
- jabberNet 修改花名册条目的昵称
修改昵称,这么简单的功能,在jabberNet里怎么实现? 翻遍了jabberNet里的代码,jabber.client.RosterManager也,JabberClient也,似乎都没有现成的方法 ...
- oc61--block
// // main.m // Block基本使用:一种数据类型,应用在动画,多线程,集合遍历,网络请求回调. // 用来保存一段代码,在恰当的时候拿出来调用.功能类似于函数.函数不能嵌套定义,blo ...
- Android休眠唤醒机制简介(二)
本文转载自:http://blog.csdn.net/zhaoxiaoqiang10_/article/details/24408911 Android休眠唤醒机制简介(二)************* ...
- Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础
本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...