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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
python PyTorch参数初始化和Finetune
2018/02/11 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
2014大学生全国两会学习心得体会
2014/03/13 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Golang 字符串的常见操作
2022/04/19 Golang
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS