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平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现评论模块
Aug 19 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
PHP四大安全策略
2014/03/12 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
关于jquery css的使用介绍
2013/04/18 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
JavaScript实现点击切换功能
2021/01/27 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
编写strcpy函数
2014/06/24 面试题
分布式数据库需要考虑哪些问题
2013/12/08 面试题
建筑个人求职信范文
2014/01/25 职场文书
策划创业计划书
2014/02/06 职场文书
班级年度安全计划书
2014/05/01 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
英文道歉信
2015/01/20 职场文书
企业安全生产规章制度
2015/08/06 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android