首页 > 代码库 > jquery动态添加删除div--事件绑定,对象克隆

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

2024-07-15 02:32:27   220人阅读

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

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

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

<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/#" name="rmlink">X</a></div></div><input type="submit" name="submit" value="http://www.mamicode.com/上传图片" /></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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" name="rmlink">X</a>    </div></div><!--clone div end-->
<form action="dowater.php" method="post" enctype="multipart/form-data"><label>请选择上传的图片</label><a href="http://www.mamicode.com/#" id="addimg" >增加图片</a><div id="mdiv">    <div >    <input type="file" name="img[]" /><a href="http://www.mamicode.com/#" name="rmlink">X</a>    </div></div><input type="submit" name="submit" value="http://www.mamicode.com/上传图片"  /></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>


联系
我们