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