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 Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
基于jquery实现五星好评
Nov 18 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现查看图片功能
Dec 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php自动载入类用法实例分析
2016/06/24 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python中查看文件名和文件路径
2017/03/31 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
计算机操作自荐信
2013/12/07 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
保险公司演讲稿
2014/09/02 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
未婚证明格式
2015/06/15 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
python 实现的截屏工具
2021/05/08 Python