jQuery中事件绑定,大多使用on就足够了。

但是对于新添加的元素 on 的绑定事件 会不起作用。

因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事件,因此 这种方式添加的 节点的点击事件是无效的。

解决方法:

事件委托。事件委托就是利用事件冒泡的原理,把事件添加到父元素或祖先元素上,触发执行效果。

原代码:

 $('#ul li').on('click', function() {
alert($(this).html())
})

修改为:

$(document).on('click', '#ul li', function() {
alert($(this).html())
})

jQuery 新添加元素事件绑定无效的更多相关文章

  1. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  2. jQuery新的事件绑定机制on()

    浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...

  3. jQuery新的事件绑定机制on()示例应用

    投稿:whsnow 字体:[增加 减小] 类型:转载   从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下     ...

  4. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  5. Jquery中的事件绑定$("#btn").bind("click",function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  6. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  7. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

  8. 用jQuery.delegate()将事件绑定在父元素上面

    1.先看看官方的示例: <html> <head> <script type="text/javascript" src="/jquery/ ...

  9. jQuery插件 -- 动态事件绑定插件jquery.livequery.js

    http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...

随机推荐

  1. angular2 ng2-validation 表单验证

    1:安装模块 npm install ng2-validation --save 2:配置app.module.ts import { FormsModule, <font color=&quo ...

  2. cocos2dx开发之util类&方法——字符串替换

    /*将originStr字符串中的searchStr替换成replaceStr*/ std::string str_replace(std::string originStr,std::string ...

  3. UVa839

    这个引用好精髓. #include <iostream> #include <cstring> #include <string> #include <map ...

  4. zombodb 几个方便的_cat api

    zombodb 暴露所有es _cat/ api 为视图,我们可以通过视图方便的查询es 的信息,默认在zdb的schema 中 包含的视图 几个方便的view 查看索引统计信息zdb.index_s ...

  5. Centos7 下的SVN安装与配置

    Centos7 下的SVN安装与配置 1.关闭防火墙 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机自关闭 systemctl disable firewalld 临 ...

  6. babelrc 中的 presets 字段(env, react)和 plugins 字段(dynamic-import-webpack, transform-object-rest-spread, ...)

    一.presets 字段 目前用到 presets: [ 'env', 'react'   // react 转码规则 ]: 只有 env 时,作用和 latest 相同,包括 es5.es6.es7 ...

  7. 解压zipfile & tarfile

    def __un_zip(self, file_path): """解压.zip格式文件到同名目录下,若解压之前就存在该目录说明已解压,跳过解压过程,返回该目录" ...

  8. js EL 正则表达式

    <script> //校验是否全由数字组成20位数 var patrn=/^[0-9]{1,20}$/; alert(patrn.test("-30000000000" ...

  9. 前端-JavaScript1-1——JavaScript简介

    1.1 JavaScript用途 前端三层: 结构层   HTML           从语义的角度描述页面的结构 样式层   CSS               从审美的角度装饰页面 行为层   J ...

  10. SWD通讯

    这几日看到坛里有几个关于SWD协议相关的文章,自己也尝试了下,有点体会,也有些疑惑,写出来与大家分享和交流下.    以下我的模拟SWD接口的板子简称为Host,目标MCU(即我要连接的板子)简称为T ...