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属性。同样需要使用事件的绑定事件。
希望明天更美好!!!