來(lái)源 ：
http://blog.csdn.net/guanghua2009/article/details/6644272 我想做一個(gè)可以動(dòng)態(tài)添加刪除div的功能。中間遇到一個(gè)問(wèn)題，最后在phpchina問(wèn)答區(qū)版主的熱心幫助下解答了(答案在最后) 使用到的jquery方法和思想就是：事件的綁定和銷(xiāo)毀(unbind)，另外還可以使用clone,通過(guò)克隆可以很好的解決這個(gè)問(wèn)題 相關(guān)描述如下
功能：點(diǎn)擊增加，自動(dòng)添加一個(gè)iptdiv 點(diǎn)擊 iptdiv后的 X 自動(dòng)刪除當(dāng)前div
問(wèn)題：默認(rèn)存在的(也就是頁(yè)面加載進(jìn)來(lái)的)的那個(gè)iptdiv 后的 X 點(diǎn)擊有效，可以刪除當(dāng)前 iptdiv 但是 jquery 動(dòng)態(tài)添加進(jìn)的 iptdiv 則點(diǎn)擊沒(méi)有效果。請(qǐng)各位大俠給看看，提供些意見(jiàn)。我要的就是動(dòng)態(tài)添加和刪除div 問(wèn)題代碼如下：
<script type="text/javascript" src="jquery.js"></script>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>請(qǐng)選擇上傳的圖片</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方法的綁定偵聽(tīng)和銷(xiāo)毀來(lái)解決動(dòng)態(tài)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>');
// 為新元素節(jié)點(diǎn)添加事件偵聽(tīng)器
bindListener();
}
// 用來(lái)綁定事件(使用unbind避免重復(fù)綁定)
function bindListener(){
$("a[name=rmlink]").unbind().click(function(){
$(this).parent().remove();
})
}
</script>
這中間就是存在一個(gè)事件綁定的過(guò)程，如果沒(méi)有的話通過(guò)js加進(jìn)來(lái)的div內(nèi)不事件并不會(huì)被執(zhí)行，添加了偵聽(tīng)事件功能后才能正確運(yùn)行
用jquery的clone方法來(lái)解決動(dòng)態(tài)div的增加刪除:
這里還有更好的寫(xiě)法，我做了些許的修改，也許弄巧成拙了。但是功能實(shí)現(xiàn)了，更多的請(qǐng)參考phpchina論壇的幫助：http://bbs.phpchina.com/viewthread.php?tid=180911&extra=&page=1
<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>請(qǐng)選擇上傳的圖片</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>
歡迎大家訪問(wèn)我的個(gè)人網(wǎng)站
萌萌的IT人