jquery動態添加刪除div--事件綁定,對象克隆

時間 2019-11-09

標籤 jquery 動態添加刪除 div 事件綁定對象克隆欄目 JQuery 简体版

原文原文鏈接

我想作一個能夠動態添加刪除div的功能。中間遇到一個問題，最後在manong123.com開發文摘版主的熱心幫助下解答了(答案在最後) javascript

使用到的jquery方法和思想就是：事件的綁定和銷燬(unbind)，另外還能夠使用clone,經過克隆能夠很好的解決這個問題相關描述以下php

功能：點擊增長，自動添加一個iptdiv 點擊 iptdiv後的 X 自動刪除當前divjava

問題：默認存在的(也就是頁面加載進來的)的那個iptdiv 後的 X 點擊有效，能夠刪除當前 iptdiv 可是 jquery 動態添加進的 iptdiv 則點擊沒有效果。請各位大俠給看看，提供些意見。我要的就是動態添加和刪除div 問題代碼以下： jquery

<script type="text/javascript" src="jquery.js"></script>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>請選擇上傳的圖片</label>
<a href="javascript:addimg()" >增長圖片</a>
<div id="mdiv">
<div >
<input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
</div>
</div>
<input type="submit" name="submit" value="上傳圖片" />
</form>
<script type="text/javascript" >
$(document).ready(function(){
$("a[name=rmlink]").click(function(){
$(this).parent().remove();
})
})
function addimg(){
$("#mdiv").append('<div ><input type="file" name="img[]" /><a href="#" name="rmlink">X</a></div>');
}
</script>

用jquery方法的綁定偵聽和銷燬來解決動態div的增長刪除：

正確代碼：

<script type="text/javascript" >
$(document).ready(function(){
 bindListener();
})

function addimg(){
 $("#mdiv").append('<div ><input type="file" name="img[]" /><a href="#" name="rmlink">X</a></div>');

 // 爲新元素節點添加事件偵聽器
  bindListener();
}

// 用來綁定事件(使用unbind避免重複綁定)
function bindListener(){
 $("a[name=rmlink]").unbind().click(function(){
  $(this).parent().remove();
    })
}
</script>

這中間就是存在一個事件綁定的過程，若是沒有的話經過js加進來的div內不事件並不會被執行，添加了偵聽事件功能後才能正確運行

用jquery的clone方法來解決動態div的增長刪除:

這裏還有更好的寫法，我作了些許的修改，也許弄巧成拙了。 app

<body>
<div style="display:none;">
<!--clone div start-->
    <div >
        <input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
    </div>
</div>
<!--clone div end-->

<form action="dowater.php" method="post" enctype="multipart/form-data">
<label>請選擇上傳的圖片</label>
<a href="#" id="addimg" >增長圖片</a>
<div id="mdiv">
    <div >
    <input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
    </div>
</div>
<input type="submit" name="submit" value="上傳圖片"  />
</form>
<script type="text/javascript" >
var temp; 
$(document).ready(function(){        
 temp = $(".iptdiv:first");
 $("a[name=rmlink]").click(function(){
  $(this).parent().remove();
    })
 $("#addimg").click(function(){
  temp.clone(true).appendTo($("#mdiv"));
 })
})
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。