您的位置：首页 > Web前端 > JQuery

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

2014-07-31 15:58 507 查看
我想做一个可以动态添加删除div的功能。中间遇到一个问题，最后在manong123.com开发文摘版主的热心帮助下解答了(答案在最后)

使用到的jquery方法和思想就是：事件的绑定和销毁(unbind)，另外还可以使用clone,通过克隆可以很好的解决这个问题相关描述如下

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

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

<scripttype="text/javascript"src="jquery.js"></script>
<body>
<formaction=""method="post"enctype="multipart/form-data">
<label>请选择上传的图片</label>
<ahref="javascript:addimg()">增加图片</a>
<divid="mdiv">
<div>
<inputtype="file"name="img[]"/><ahref="#"name="rmlink">X</a>
</div>
</div>
<inputtype="submit"name="submit"value="上传图片"/>
</form>
<scripttype="text/javascript">
$(document).ready(function(){
$("a[name=rmlink]").click(function(){
$(this).parent().remove();
})
})
functionaddimg(){
$("#mdiv").append('<div><inputtype="file"name="img[]"/><ahref="#"name="rmlink">X</a></div>');
}
</script>


用jquery方法的绑定侦听和销毁来解决动态div的增加删除：
正确代码：

<scripttype="text/javascript">
$(document).ready(function(){
bindListener();
})

functionaddimg(){
$("#mdiv").append('<div><inputtype="file"name="img[]"/><ahref="#"name="rmlink">X</a></div>');

//为新元素节点添加事件侦听器
bindListener();
}

//用来绑定事件(使用unbind避免重复绑定)
functionbindListener(){
$("a[name=rmlink]").unbind().click(function(){
$(this).parent().remove();
})
}
</script>

这中间就是存在一个事件绑定的过程，如果没有的话通过js加进来的div内不事件并不会被执行，添加了侦听事件功能后才能正确运行


用jquery的clone方法来解决动态div的增加删除:
这里还有更好的写法，我做了些许的修改，也许弄巧成拙了。

<body>
<divstyle="display:none;">
<!--clonedivstart-->
<div>
<inputtype="file"name="img[]"/><ahref="#"name="rmlink">X</a>
</div>
</div>
<!--clonedivend-->

<formaction="dowater.php"method="post"enctype="multipart/form-data">
<label>请选择上传的图片</label>
<ahref="#"id="addimg">增加图片</a>
<divid="mdiv">
<div>
<inputtype="file"name="img[]"/><ahref="#"name="rmlink">X</a>
</div>
</div>
<inputtype="submit"name="submit"value="上传图片"/>
</form>
<scripttype="text/javascript">
vartemp;
$(document).ready(function(){
temp=$(".iptdiv:first");
$("a[name=rmlink]").click(function(){
$(this).parent().remove();
})
$("#addimg").click(function(){
temp.clone(true).appendTo($("#mdiv"));
})
})
</script>
</body>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航