tinguo002

 

jquery动态添加删除div--事件绑定,对象克隆

来源 :http://blog.csdn.net/guanghua2009/article/details/6644272

 我想做一个可以动态添加删除div的功能。中间遇到一个问题,最后在phpchina问答区版主的热心帮助下解答了(答案在最后)        使用到的jquery方法和思想就是:事件的绑定和销毁(unbind),另外还可以使用clone,通过克隆可以很好的解决这个问题          相关描述如下

功能:点击增加,自动添加一个iptdiv 点击 iptdiv后的 X 自动删除当前div

问题:默认存在的(也就是页面加载进来的)的那个iptdiv 后的 X 点击有效,可以删除当前 iptdiv  但是 jquery 动态添加进的 iptdiv 则点击没有效果。请各位大侠给看看,提供些意见。我要的就是动态添加和删除div 问题代码如下: 
<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的增加删除:

这里还有更好的写法,我做了些许的修改,也许弄巧成拙了。但是功能实现了,更多的请参考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>请选择上传的图片</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>


欢迎大家访问我的个人网站 萌萌的IT人

posted on 2012-06-29 19:53 一堣而安 阅读(3985) 评论(0)  编辑  收藏 所属分类: js_css


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

收藏夹

搜索

最新评论

阅读排行榜

评论排行榜