声明  : 该文的编写纯属个人试验所得 ,供网友借鉴。如有错误,请留言!!!

  首先,添加新节点的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属性并获取该对象相关推荐

  1. Hadoop-HBASE 热添加新节点

    Hadoop-HBASE 热添加新节点 环境: 192.168.137.101 hd1 192.168.137.102 hd2 192.168.137.103 hd3 192.168.137.104 ...

  2. kubesphere添加新节点

    https://kubesphere.com.cn/docs/installing-on-linux/cluster-operation/add-new-nodes/ 添加新节点 KubeSphere ...

  3. Oracle 11g RAC 添加新节点及故障解决案例

    Oracle 11g RAC 添加新节点及故障解决案例 系统环境: 操作系统:RedHat EL55 集群:      Oracle 11g GI Oracle:   Oracle 11gR2 一.配 ...

  4. HAC集群添加新节点

    瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台:Linux x86-64 Red Hat Enterprise Linux 7 版本:4.5.7,4.5.6 文档用途 本文档用于指导HAC ...

  5. 在Citus集群中添加新节点

    一.添加Citus新节点作为primary worker node 1.在新节点上安装PG和Citus,以及其他需要的组件(也可以在已有PG服务器上创建新的PG数据库实例): 2.初始化PG数据库实例 ...

  6. KingbaseES R6 集群通过备库clone在线添加新节点

    案例说明: KingbaseES R6集群可以通过图形化方式在线添加新节点,但是在添加新节点clone环节时,是从主库copy数据到新的节点,这样在生产环境,如果数据量大,将会对主库的网络I/O造成压 ...

  7. 向基于Linux的Oracle RAC 10g集群添加新节点

    在多数业务中,Oracle真正应用集群 (RAC) 配置的主要业务要求是整个系统中数据库层的可伸缩性 - 这样,当用户数增加时,可将额外实例添加到该集群来分发该负载.     在Oracle RAC ...

  8. c语言在尾部添加新节点,在单链表最后插入节点

    要在单链表的最后插入节点,需要提及以下两种情况. 新节点添加到空链表中 新节点添加到链表的末尾 1. 新节点添加到空链表中 如果满足条件(head == NULL). 因此,只需要在C语言中使用mal ...

  9. python删除类方法_python中向类中动态添加新特性及删除属性方法

    class Foo(object): pass obj = Foo() # 添加对象属性(对象名追加对象属性) obj.a = 100 # print(obj.a) # 添加类属性(类名称追加类属性) ...

最新文章

  1. 最大公约数与最小公约数!_只愿与一人十指紧扣_新浪博客
  2. php 通过exec 创建git分支失败
  3. 如何才能写出好的软件设计文档?
  4. Java文件路径(getResource)
  5. Elasticsearch文档的CRUD
  6. python-类的定制
  7. 【Python基础知识-pycharm版】第一节-基础
  8. java函数void返回值是,Java中main()函数的返回值是什么( )。A、StringB、intC、c......
  9. NGINX反向代理部署
  10. Python 使用标准库根据进程名获取进程PID
  11. 【Linux-shell】shell脚本基础语法练习
  12. 【资产管理】2020年海外头部资管机构经营特点及启示
  13. 中国电子技术标准化研究院与Linux基金会战略合作签约仪式圆满落幕
  14. dell笔记本驱动安装失败_W10系统声卡驱动程序安装失败的原因及解决方法
  15. 企业入职测试题目及答案_[企业入职性格测试题以与答案信息]新员工入职性格测试题...
  16. 选中物体高亮显示(MR开发日志)
  17. TaintDroid剖析之DVM变量级污点跟踪(下篇)
  18. android mac 照片恢复,照片恢复
  19. swift 调用 oc [cannot find interface declaration for ‘ BaseViewModel’ , superclass of ‘indexViewModel’
  20. 随机变量序列的两种收敛性

热门文章

  1. Asp.net中一个页面多个表单的解决方案
  2. python学习笔记系列-方便自我学习
  3. Navicat设置unique报错
  4. 数组之删除排序数组中的重复项
  5. List list=new ArrayList()怎么回事
  6. DM368开发 -- 制作ubifs文件系统
  7. hdu-1422(简单dp)
  8. 【译】X Server-Client!! What the hell?
  9. EOS声称的每秒百万级的交易速度靠谱么?
  10. Android MediaRecorder系统结构