很久没有使用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. Nmap扫描教程之Nmap基础知识

    Nmap扫描教程之Nmap基础知识 Nmap扫描Nmap基础知识 Nmap是一个免费开放的网络扫描和嗅探工具包,也叫网络映射器(Network Mapper).Nmap工具可以用来扫描电脑上开放的端口 ...

  2. Win7无法添加用户的问题

    这段时间搞dcom的东西,然后按照网上说的,用dcomcnfg打开管理器,在dcom中我的电脑里面属性中把默认身份验证级别改为 无.然后再使用的时候,发现win7中的账户管理里面,什么账户都没有了,不 ...

  3. 缩减apk大小

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 1,重复的资源,不用的资源,删去. 2,使用混淆,可以优化. 3,尽量的使用代码,或者其 ...

  4. 3143 二叉树的序遍历codevs

    题目描述 Description 求一棵二叉树的前序遍历,中序遍历和后序遍历 输入描述 Input Description 第一行一个整数n,表示这棵树的节点个数. 接下来n行每行2个整数L和R.第i ...

  5. 20172330 2017-2018-1 《Java程序设计》第六周学习总结

    学号 2017-2018-2 <程序设计与数据结构>第六周学习总结 教材学习内容总结 这一章主要是对数组的学习: 数组是一种简单而功能强大的编程语言结构,用于分组和组织数据.在java中, ...

  6. Maven入门指南③:坐标和依赖

    1 . 坐标 maven 的所有构件均通过坐标进行组织和管理.maven 的坐标通过 5 个元素进行定义,其中 groupId.artifactId.version 是必须的,packaging 是可 ...

  7. 设计模式之七:模板方法模式(Template Method)

    模板方法模式: 定义了一个算法的基本操作骨架,并将算法的一些步骤延迟到子类中来实现. 模板方法模式让子类在不更改算法结构的前提下能够又一次定义算法的一些步骤. Define the skeleton ...

  8. 【Go命令教程】13. go tool cgo

    cgo 也是一个 Go 语言自带的特殊工具.一般情况下,我们使用命令 go tool cgo 来运行它.这个工具可以使我们创建能够调用 C 语言代码的 Go 语言源码文件.这使得我们可以使用 Go 语 ...

  9. Linux/CentOS服务器 一个网卡绑定多IP地址(永久设置)

    有时我们在使用 Linux 服务器时需要配置多个IP地址.如果要配置多个IP地址是否需要多块网卡呢?答案是否定的.以 CentOS 系统为例,多个 IP 地址是可以共享一块物理网卡的. 如何永久为单网 ...

  10. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...