很久没有使用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无效的更多相关文章

  1. JQuery on绑定click无效的的bug解决办法?

    如果你在移动端使用zepto.js, touch 来代替click事件,那就没有上述标题的问题了.如果你仍然使用了click,在点击事件中苹果机就可能出现无效的结果. 第一种方法: 解决的方法很巧妙, ...

  2. 处理jQuery append加入的元素 绑定事件无效的方法

    通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(functi ...

  3. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  4. jQuery动态添加元素事件

    在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...

  5. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  6. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  7. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  8. 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  9. jquery 设置checked="checked"无效,radio未选中。。

    jquery 设置checked="checked"无效,radio未选中.. 最好还是使用.prop(),在jQuery1.6版本之前.attr存在一些bug.在1.6之后它会自 ...

随机推荐

  1. 4951: [Wf2017]Money for Nothing 决策单调性 分治

    Bzoj4951:决策单调性 分治 国际惯例题面:一句话题面:供应商出货日期为Ei,售价为Pi:用户收购截止日期为Si,收购价格为Gi.我们要求max((Si-Ej)*(Gi-Pj)).显然如果我们把 ...

  2. [Java]类的生命周期(下)类的初始化[转]

    上接深入java虚拟机——深入java虚拟机(二)——类加载器详解(上),在上一篇文章中,我们讲解了类的生命周期的加载和连接,这一篇我们接着上面往下看. 类的初始化:在类的生命周期执行完加载和连接之后 ...

  3. ConcurrentHashMap内存溢出问题

    写在前面 上周,同事写了一段ConcurrentHashMap的测试代码,说往map里放了32个元素就内存溢出了,我大致看了一下他的代码及运行的jvm参数,觉得很奇怪,于是就自己捣鼓了一下.首先上一段 ...

  4. ZOJ 3765 Lights (伸展树splay)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3765 Lights Time Limit: 8 Seconds ...

  5. HDU 4813 Hard Code(水题,2013年长春现场赛A题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4813 签到题. 把一个字符串按照格式输出就可以了,很水 #include <stdio.h> ...

  6. IAR EWARM 关闭纯汇编函数的警告的方法

    /关闭警告 #pragma diag_suppress=Pe940 uint8_t GetMyData(void) { asm(“MOV R0, #0x550F”); } //恢复警告 #pragma ...

  7. 3I工作室的成员在2013年(第6届)中国大学生计算机设计大赛总决赛中荣获全国二等奖

    在暑假举行的2013年(第6届)中国大学生计算机设计大赛中,我院的参赛作品<毕业生论文选导系统>(作者:祝丽艳/许明涛:指导老师:元昌安/彭昱忠)入围总决赛,并荣获全国二等奖. 2013年 ...

  8. Revit API画垂直于风管的风管

    start /// <summary> /// 选择风管与风管外一点,画与风管垂直的风管. /// </summary> [Transaction(TransactionMod ...

  9. C# 连接Oracle数据库,免安装oracle客户端

    一.方案1 首先下面的内容,有待我的进一步测试和证实.18.12.20 被证实了,还需要安装Oracle客户端,或者本机上安装oracle数据库软件. 18.12.20 1.下载Oracle.Mana ...

  10. 使用VMWare虚拟机创建CentOS版本号的Linux学习环境(每一步都有截图与说明)

    学习Android开发.假设不学习Linux的基本使用,总感觉心里过意不去,由于毕竟Android还是搭载在Linux的基础之上的. 因此.学习一种Linux系统的基本操作.对我们以后的学习还是非常有 ...