jQuery实现获取动态添加的标签对象示例


Posted in jQuery onJune 28, 2018

本文实例讲述了jQuery实现获取动态添加的标签对象。分享给大家供大家参考,具体如下:

jquery无法直接给网页里面动态添加点击事件,并且获取到对象

一般来说,js获取动态添加的组件都是自定义给标签添加上onclick属性来达到调用,这是普通的方法,如下:

onclick方式获取

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery动态获取事件</title>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button onclick='btnclick(this)'>按钮"+i+"</button></br>";
  }
  $('#test').html(html);
  function btnclick(e) {
    console.log(e.textContent);//获取按钮文本
  }
</script>
</html>

如今jquery已经到了3版本了,官方已经放弃live方式了,推荐使用on方法。语法为

$('选择器').on('click','选择类型',function (e){代码段}

jquery不能动态获取到网页里面的标签,需要先获取到网页固定的标签,让后再获取里面其他的标签,所以,如上面代码中的id为test的div是固定不变的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery动态获取事件</title>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button>按钮"+i+"</button></br>";
  }
  $('#test').html(html);
  $('#test').on('click','button',function (e){
    console.log($(this));
  });
</script>
</html>

使用http://tools.3water.com/code/HtmlJsRun测试运行效果:

jQuery实现获取动态添加的标签对象示例

这样写就非常简单了,其中选择类型里面的button还可以进一步限制,如:button[class=test],就是选择动态创建的类为text的按钮。

要实现单双数只需要在test后面加”:even”,button[class=test]:even,或者odd偶数

修改后的示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery动态获取事件</title>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var html="";//声明变量用于存放html
  for (i=0;i<=10;i++){
    html=html+"<button class=test>按钮"+i+"</button></br>";
  }
  $('#test').html(html);
  $('#test').on('click','button[class=test]:even',function (e){
    console.log($(this));
  });
</script>
</html>

继续使用http://tools.3water.com/code/HtmlJsRun 测试jquery动态获取奇数对象运行效果:

 jQuery实现获取动态添加的标签对象示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP安装全攻略:APACHE
2006/10/09 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php存储过程调用实例代码
2013/02/03 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python的高阶函数用法实例分析
2019/04/11 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
办理信用卡工作证明
2014/01/11 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
《雨点》教学反思
2014/02/12 职场文书
小学教师寄语大全
2014/04/03 职场文书
感恩寄语大全
2014/04/11 职场文书
高中学生评语大全
2014/04/25 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
庆祝儿童节标语
2014/10/09 职场文书
入学证明
2015/06/23 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python