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实现div跟随鼠标移动
Aug 20 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
模拟flock实现文件锁定
2007/02/14 PHP
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
python正则表达式re模块详解
2014/06/25 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
如何使用Python调整图像大小
2020/09/26 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
水电工岗位职责
2014/02/12 职场文书
优秀经理获奖感言
2014/03/04 职场文书
实习生矿工检讨书
2014/10/13 职场文书
领导欢迎词范文
2015/01/26 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python