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属性并获取该对象的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java环境变量配置(win7)
- 下一篇: double compare 0