jq添加新节点赋予class属性并获取该对象
声明 : 该文的编写纯属个人试验所得 ,供网友借鉴。如有错误,请留言!!!
首先,添加新节点的class属性不能运用click、change等事件,但能通过类名选择器获取该对象的value值。
<div class="div1">
上传文件 : <input type="file" name="file0"> <br><br>
</div>
<button id="btn">获取新添加元素input的值</button>
</body>
<script type="text/javascript">
$(function(){
$(".div1").on("change","input",function(){
console.log("on事件成功触发!!!"); //添加一个class属性是div2的元素
$(this).parent().after("<div class='div2'>上传文件 : <input type='text'> <br><br> <button></button> </div>");
});
$("#btn").click(function(){
var value = $(".div2 input").val(); //获取新添加input输入的值
console.log("获取到新添加的值是 :"+value);
});
利用事件的绑定事件给子代元素绑定一个或者多个事件,可以用on() bind() live() , one() ,但笔者个人认为使用on() 进行绑定更好。通过 .frist的绑定事件可以获取到.div2(即动态添加的元素)的点击事件。 到此完成
This is my JSP page. <br>
<div class="frist">
<div class="div1">
上传文件 : <input name="file0" type="file"> <br><br>
<img src="" style="width: 300px;height: 200px">
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$(".frist").on("change","input",function(){
console.log("bind事件测试成功!!");
$(this).parent().after("<div class='div2'>上传文件 <input name='file0' type='file'><br><br><img src='' style='width: 300px;height: 200px'></div>"); // 在div1后面添加div2元素
});
$(".frist").on("click",".div2",function(){ //当点击div2时控制台会有输出 该click事件得到响应
console.log("获取到新增节点!!!");
});
});
</script>
附 : 当元素更改class属性或者id属性时,直接使用click() change()等事件时获取到的是该元素更改前的class元素, 而不是更改后的class属性。同样需要使用事件的绑定事件。
希望明天更美好!!!
转载于:https://www.cnblogs.com/ccq-190203/p/10621935.html
jq添加新节点赋予class属性并获取该对象相关推荐
- Hadoop-HBASE 热添加新节点
Hadoop-HBASE 热添加新节点 环境: 192.168.137.101 hd1 192.168.137.102 hd2 192.168.137.103 hd3 192.168.137.104 ...
- kubesphere添加新节点
https://kubesphere.com.cn/docs/installing-on-linux/cluster-operation/add-new-nodes/ 添加新节点 KubeSphere ...
- Oracle 11g RAC 添加新节点及故障解决案例
Oracle 11g RAC 添加新节点及故障解决案例 系统环境: 操作系统:RedHat EL55 集群: Oracle 11g GI Oracle: Oracle 11gR2 一.配 ...
- HAC集群添加新节点
瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台:Linux x86-64 Red Hat Enterprise Linux 7 版本:4.5.7,4.5.6 文档用途 本文档用于指导HAC ...
- 在Citus集群中添加新节点
一.添加Citus新节点作为primary worker node 1.在新节点上安装PG和Citus,以及其他需要的组件(也可以在已有PG服务器上创建新的PG数据库实例): 2.初始化PG数据库实例 ...
- KingbaseES R6 集群通过备库clone在线添加新节点
案例说明: KingbaseES R6集群可以通过图形化方式在线添加新节点,但是在添加新节点clone环节时,是从主库copy数据到新的节点,这样在生产环境,如果数据量大,将会对主库的网络I/O造成压 ...
- 向基于Linux的Oracle RAC 10g集群添加新节点
在多数业务中,Oracle真正应用集群 (RAC) 配置的主要业务要求是整个系统中数据库层的可伸缩性 - 这样,当用户数增加时,可将额外实例添加到该集群来分发该负载. 在Oracle RAC ...
- c语言在尾部添加新节点,在单链表最后插入节点
要在单链表的最后插入节点,需要提及以下两种情况. 新节点添加到空链表中 新节点添加到链表的末尾 1. 新节点添加到空链表中 如果满足条件(head == NULL). 因此,只需要在C语言中使用mal ...
- python删除类方法_python中向类中动态添加新特性及删除属性方法
class Foo(object): pass obj = Foo() # 添加对象属性(对象名追加对象属性) obj.a = 100 # print(obj.a) # 添加类属性(类名称追加类属性) ...
最新文章
- 最大公约数与最小公约数!_只愿与一人十指紧扣_新浪博客
- php 通过exec 创建git分支失败
- 如何才能写出好的软件设计文档?
- Java文件路径(getResource)
- Elasticsearch文档的CRUD
- python-类的定制
- 【Python基础知识-pycharm版】第一节-基础
- java函数void返回值是,Java中main()函数的返回值是什么( )。A、StringB、intC、c......
- NGINX反向代理部署
- Python 使用标准库根据进程名获取进程PID
- 【Linux-shell】shell脚本基础语法练习
- 【资产管理】2020年海外头部资管机构经营特点及启示
- 中国电子技术标准化研究院与Linux基金会战略合作签约仪式圆满落幕
- dell笔记本驱动安装失败_W10系统声卡驱动程序安装失败的原因及解决方法
- 企业入职测试题目及答案_[企业入职性格测试题以与答案信息]新员工入职性格测试题...
- 选中物体高亮显示(MR开发日志)
- TaintDroid剖析之DVM变量级污点跟踪(下篇)
- android mac 照片恢复,照片恢复
- swift 调用 oc [cannot find interface declaration for ‘ BaseViewModel’ , superclass of ‘indexViewModel’
- 随机变量序列的两种收敛性