jQuery-append添加元素click无效
很久没有使用jQuery,做项目的时候遇到一个小问题就是网页加载之后的append的元素是可以执行click事件,网页加载完成之后的,再次append的元素不执行click事件,简单的通过ul模拟一下:
<ul class="content">
</ul>
<span class="test">测试</span>
三种不同的点击方式,append之后的click无效,通过on执行,注意参数:
$(function() {
$('.content').append('<li>FlyElephant</li>');
$('.content li').click(function(event) {
console.log('博客园-FlyElephant');
});
$('.content li').on('click', function() {
console.log('博客园-FlyElephant');
});
/*通用*/
$(document).on('click', '.content li', function() {
console.log('keso');
});
$('.test').click(function() {
$('.content').append('<li>keso</li>');
});
});
jQuery版本2.1.4~
jQuery-append添加元素click无效的更多相关文章
- JQuery on绑定click无效的的bug解决办法?
如果你在移动端使用zepto.js, touch 来代替click事件,那就没有上述标题的问题了.如果你仍然使用了click,在点击事件中苹果机就可能出现无效的结果. 第一种方法: 解决的方法很巧妙, ...
- 处理jQuery append加入的元素 绑定事件无效的方法
通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(functi ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
- jQuery动态添加元素事件
在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery 设置checked="checked"无效,radio未选中。。
jquery 设置checked="checked"无效,radio未选中.. 最好还是使用.prop(),在jQuery1.6版本之前.attr存在一些bug.在1.6之后它会自 ...
随机推荐
- Lvs+Keepalived+Mysql
环境 [root@node1 ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@node1 ~]# uname -a Linu ...
- Gym 100646 Problem E: Su-Su-Sudoku 水题
Problem E: Su-Su-Sudoku/center> 题目连接: http://codeforces.com/gym/100646/attachments Description By ...
- linux 下安装 RZ SZ命令 以及使用
对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,rz是把win的文件上传到linux上 sz是吧 ...
- Elasticsearch 实现自定义排序插件
插件入口: package ttd.ugc.plugin; import org.elasticsearch.plugins.Plugin;import org.elasticsearch.scrip ...
- node部署静态页面;node上线静态页面
node部署静态页面上线 静态页面上线可以采用 nginx, tomcat或者node ,我们这里介绍下node部署静态页面 这里采用最简单的上线方式,我们就不用node + express + ej ...
- IntraWeb XIV 类型速查表
tkClass ================== IWUserSessionBase.TIWUserSessionBase < TDataModule < TComponent < ...
- Android SDKVersion 参数列表
http://developer.android.com/guide/topics/manifest/uses-sdk-element.html Platform Version API Level ...
- AutoMapper实际项目运用
AutoMapper是对象到对象的映射工具.在完成映射规则之后,AutoMapper可以将源对象转换为目标对象. 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前 ...
- 用ViewPager实现一个程序引导界面
下面使用ViewPager来实现一个程序引导的demo: 一般来说,引导界面是出现第一次运行时出现的,之后不会再出现.所以需要记录是否是第一次使用程序,办法有很多,最容易想到的就是使用SharedPr ...
- USB2.0 速度识别--区分低速-高速-全速
USB2.0是向下兼容USB1.X的,即USB2.0支持高速,全速,低速的USB设备 (HIGH-SPEED,FULL-SPEED,LOW-SPEED),而USB1.X不支持高速设备. 因此如果高速设 ...