我想做一个可以动态添加删除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>

jquery动态添加删除div--事件绑定,对象克隆的更多相关文章

  1. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  2. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  3. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  4. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  5. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  6. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  7. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Jquery动态添加 删除 操作实现

    这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...

  9. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

随机推荐

  1. Codeforces Round #489 (Div. 2) E - Nastya and King-Shamans

    E - Nastya and King-Shamans 题目大意:有n个数,每一次操作更改一个数,每次操作之后问你是否有一个数等于其前面所有数的和. 思路:好题,想了很久没想出来,看了题解,主要思想就 ...

  2. 异步模型（APM）的注意事项

    一.在没有线程池的前提下使用APM APM可以让线程池在异步操作完成时调用指定的回调方法.它使用很少的资源,并提供了出色的性能,然而,APM 还允许通过另外三种方式发现异步操作在何时完成. 首先,如果 ...

  3. 提起Ajax请求的方式(POST)

    前言 => 是ES6中的arrow function x=>x+6 就相当于 function(x){ return x+6; } 正文 XMLHttpRequest a=new XMLH ...

  4. Android 之XML数据解析（2）—— SAX解析

    (以下文章基本照抄郭霖大神的<第一行代码>) 在Android之 解析XML文件(1)—— Pull解析 中我们讲了Pull方式解析XML文件.今天讲另外一种方式,SAX解析XML文件. ...

  5. Shiro切入Spring的方式

    在springMVC中要使用shiro,一般都遵循下面的配置: applicationContext-shiro.xml <bean id="shiroFilter" cla ...

  6. Educational Codeforces Round 38 部分题解

    D. Buy a Ticket 分析 建一个源点,连向所有结点,边的花费为那个结点的花费,图中原有的边花费翻倍,最后跑一遍最短路即可. code #include<bits/stdc++.h&g ...

  7. EAP-MD5认证暴力破解工具eapmd5pass

    EAP-MD5认证暴力破解工具eapmd5pass   EAP-MD5是一种基于802.1x协议的认证机制.由于该机制存在漏洞,所以并不能保证数据安全.Kali Linux预置一个专用工具eapmd5 ...

  8. Eclipse下使用Stanford CoreNLP的方法

    源码下载地址:CoreNLP官网. 目前release的CoreNLP version 3.5.0版本仅支持java-1.8及以上版本,因此有时需要为Eclipse添加jdk-1.8配置,配置方法如下 ...

  9. Codechef APRIL14 ANUCBC Cards, bags and coins 背包DP变形

    题目大意 有n个数字,选出一个子集,有q个询问,求子集和模m等于0的方案数%1000000009.(n <= 100000,m <= 100,q <= 30) 假设数据很小,我们完全 ...

  10. ASCII表 基本记忆 -- C

    /* ASCII表规则记忆 我们仅仅要记住了一个字母或数字的 ASCII 码 (比如记住 A 为 65 , 0 的 ASCII 码为 48 ), 知道对应的大写和小写字母之间差 32. 0 -- 32 ...