jquery动态添加删除div--事件绑定,对象克隆
来源:互联网 发布:香港上海经济数据对比 编辑:程序博客网 时间:2024/05/17 09:07
我想做一个可以动态添加删除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>
- jquery动态添加删除div--事件绑定,对象克隆
- jquery动态添加删除div--事件绑定,对象克隆
- jquery动态添加删除div
- 动态添加图片并绑定删除事件
- Jquery 为动态添加元素绑定事件
- jquery 为动态添加元素绑定事件
- jQuery 给动态添加元素绑定事件
- jQuery动态添加的元素绑定事件
- jquery 绑定动态添加html事件
- jquery html 动态添加元素绑定事件
- jquery如何给对象动态添加属性以及选择器、事件的绑定
- jquery动态添加删除div 新添加的为什么删不掉
- (Jquery 功能篇) Jquery div 动态添加监听事件
- Jquery动态绑定事件
- Jquery动态绑定事件
- jQuery动态事件绑定
- jquery动态绑定事件
- jQuery动态绑定事件
- 深入了解php底层机制(-)
- flow
- hive 元数据解析
- [JAVA]判断字符串是否为乱码
- CheckedTextView 的用法
- jquery动态添加删除div--事件绑定,对象克隆
- 技术博客收集
- 实现票据套打小程序
- 按某一字段取无重复记录sql语句
- 鼠标形状对应参照表
- 众多的手机OS,你们伤了谁
- LoadRunner获取WEB请求头信息的方法:REQUEST、RESPONSE
- IT职场人生系列之四:怎样写简历
- 有效学习的十大方法