对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click。因为这些元素属于动态生成,除非采用 onclick 内联的形式。那么解决办法是使用 live 和 on 事件方法。

注意,jquery 1.7.2 之后的版本不建议使用 live。

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

$(selector).on(event,childSelector,data,function)
参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值,也可以是数组。必须是有效的事件。

childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。

jquery动态添加的元素不能直接应用事件方法的时候的更多相关文章

  1. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  2. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  3. jquery动态添加的元素绑定的事件不生效的问题

    我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种 ...

  4. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  5. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  6. jquery 动态添加的代码不能触发绑定事件

    今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等 参考文章证明了我的结论,并给出了原因及解决方案 原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...

  7. jQuery动态添加的元素中处理字符串溢出后在指定字符数后添加省略号

    "+[jsonData[i].questitle.lenth>40?jsonData[i].questitle.substring(0,40)+"...":json ...

  8. 为动态添加的元素,绑定click事件

    全选和取消全选 $("#quanxuan").click(function(){ $("input[name='picCheck']").prop(" ...

  9. 给Jquery动态添加的元素添加事件2

    $('div').on('click', 'button', function(e){console.log($(e.target).is(':button'))}); $('<button&g ...

随机推荐

  1. 电脑装windows和ubuntu,如何卸载ubuntu系统

    电脑装windows和ubuntu,如何卸载ubuntu系统 2018年01月17日 16:28:29 职业炮灰 阅读数:684    版权声明:本文为博主原创文章,未经博主允许不得转载. https ...

  2. linux 定时下载github最新代码

    场景:网站的代码在github上托管,静态网站部署在服务器上,每次自己修改完本地代码后,提交到github上,需要自己去服务器上执行git pull 拉取最新代码, 为了解决这种操作,自己再服务器上  ...

  3. shell脚本自动化部署服务

    shell脚本自动化部署 !/bin/bash #export PATH=$PATH:/export/maven/bin run_flag_dir="/data0/shell/deploy_ ...

  4. django系列 2 :启动应用,目录结构解读

    来源:https://docs.djangoproject.com/en/2.1/intro/tutorial01/ 该教程是创建一个用于投票的网页. 1.使用命令创建site 进入要创建site的目 ...

  5. python 爬虫之beautifulsoup(bs4)环境准备

    环境准备: bs4安装方法:https://blog.csdn.net/Bibabu135766/article/details/81662981 requests安装方法:https://blog. ...

  6. MS SQL Server 数据库连接字符串详解

    MS SQL Server 数据库连接字符串详解 原地址:http://blog.csdn.net/jhhja/article/details/6096565 问题 : 超时时间已到.在从池中获取连接 ...

  7. ACM-ICPC 2018 徐州赛区网络预赛 C Cacti Lottery(期望+暴力)

    https://nanti.jisuanke.com/t/31455 题意 给一个3*3的方格填入 1-9 九个数 有些数是已知的,有些数是对方已知但我未知的,有些数是大家都未知的 我要计算取得最大的 ...

  8. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. ajax向Django前后端提交请求和CSRF跨站请求伪造

    1.ajax登录示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 impo ...

  10. 程序设计-理解java继承-遁地龙卷风

    (0)写在前面 编程和现实世界是息息相关的,你是如何理解现实世界中的继承呢? 继承在编程中应理解为:对父类资源(本文只讨论方法)的使用,父类方法只提供类基本的功能,父类方法之间不存在调用关系. (1) ...