jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能。中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后)
使用到的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的增加删除:
这里还有更好的写法,我做了些许的修改,也许弄巧成拙了。
<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>