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属性。同样需要使用事件的绑定事件。

          希望明天更美好!!!

 

posted @ 2019-03-29 19:04  陈晨飞抵  阅读(628)  评论(0编辑  收藏  举报