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失效解决方法 >>>>>>>>>>>>>>>>>>> ...
随机推荐
- 配置Chrome的代理服务器
用命令行启动Chrome,带以下参数: --proxy-server="socks5://myproxy:8080" 下列参数可选 --host-resolver-rules= ...
- nginx access 日志位置
nginx access 日志位置 /var/log/nginx tail -f access.log
- HDU5526/BestCoder Round #61 (div.1)1004 Lie 背包DP
Lie 问题描述 一个年级总共有N个学生,每个人属于唯一一个班级.现在他们站在一排,同班同学并不一定会站在一起,但每个人都会说一句话:“站在我左边的有Ai个同班同学,右边有Bi个同班同学”.然而并 ...
- 【NOIP2018】为什么这么无力啊
菜鸡又要爆零了 辛辛苦苦背板子结果考时候脑子一片空白 第一题线段树调了半小时 看完三道题两道写暴搜一道写暴力(说是暴搜,觉得更像写了个背包) 别提暴搜还忘记剪枝. . . . . . 我觉得考场上最菜 ...
- cocos2d-x 3.2 之 2048 —— 第二篇
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- Linux I2C驱动分析(三)----i2c_dev驱动和应用层分析 【转】
本文转载自:http://blog.chinaunix.net/uid-21558711-id-3959287.html 分类: LINUX 原文地址:Linux I2C驱动分析(三)----i2c_ ...
- 安卓Recovery模式该怎么用?【转】
本文转载自:http://android.baike.com/article-109914.html 安卓系统出了名的刷机刷机再刷机,说起刷机就不能不谈Recovery模式,这项刷机过程中最重要的一到 ...
- servlet中的中文乱码问题
老师总会说道:学完这个知识点,我们来谈谈中文乱码问题. 乱码的问题总是无处不在,处理不好会给用户带极差的用户体验. 那么我们来记录一下servlet中的乱码问题吧! 1.服务器向客户端响应时出现的乱码 ...
- codeforces round #424 div2
A 暴力查询,分三段查就可以了 #include<bits/stdc++.h> using namespace std; ; int n, pos; int a[N]; int main( ...
- iOS中的数据库—使用FMDB
一.回顾 iOS中的数据存储方式 1.XML属性列表(plist) 写入OC的一些基本数据类型,不是所有对象都可以写入 2.Preference(偏好设置) 本质还是通过“plist”来存储数据,但是 ...