使用jQuery的clone()方法可以实现动态添加一个或一组元素,很方便,但是需要注意一个问题是:clone(true)表示可以复制事件和元素,clone(false)表示只复制元素,不复制事件。之前我在网上搜到好多关于动态添加和删除元素的相关文章,都不能解决我目前的需求,而且删除还不好使(原因是clone(true)后,把click里面的方法都复制了一份)。今天我自己解决了这个问题,mark一下,以备后用。
HTML:
<div class="widget-body">
<div class="widget-main">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"> </label>
<div class="col-sm-9">
<span class="input-icon">
<select id="switch_t_language" name="tl">
<option value="en">English</option>
<option value="zh-CN">Chinese(Simplified)</option>
<option value="zh-TW">Chinese(Traditional)</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
</select>
</span>
<span class="input-icon">
<i class="icon-comment green"></i>
<input type="text" id="message" name="message" style="width:500px;" placeholder="Send Messages...">
</span>
<a href="javascript:;" class="btn btn-link dictpush-plus" >
<i class="fa fa-plus green"></i>
</a>
<span id="message_span"></span>
</div>
</div>
</div>
</div>
JS:
$(function(){
//add row
$(".dictpush-plus").click(function(){
if($(this).hasClass("dictpush-plus")){//这个是添加一组元素的
$(this).parents(".form-group").clone(true).appendTo($(".widget-main"));
$(this).children().removeClass("fa-plus").removeClass("green").addClass("fa-minus").addClass("red");
$(this).removeClass("dictpush-plus").addClass("dictpush-minus");
}else if($(this).hasClass("dictpush-minus")){//这个判断是为了删除元素用的,不能用bind或者click的方法,试了都不行
$(this).parents(".form-group").remove();
}
});
});
最后效果如下图:
- 大小: 33.5 KB
分享到:
相关推荐
本资源“jquery动态复制或者删除input表单特效代码下载.zip”提供了利用jQuery实现的一种实用功能,即动态地在网页上复制或删除input表单元素,这对于创建动态、交互性强的用户界面非常有用。 首先,jQuery的选择器...
本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先,我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中,`add()`函数...
本文将深入探讨如何使用jQuery实现动态地增加和删除条件拼串组合,这是一个在开发过程中常见且实用的功能,尤其对于前端交互丰富的应用来说。 首先,我们需要了解jQuery的基本用法。jQuery通过选择器选取DOM元素,...
本文介绍了如何通过使用JQuery的Clone方法来巧妙添加多行数据,并将这些数据更新到数据库中。首先,我们看到的是一个前端页面的HTML代码,这个页面包含了动态添加数据行的功能。接下来,我们深入探讨JQuery的Clone...
总的来说,通过jQuery的高效DOM操作和事件处理能力,我们可以轻松实现动态表格的功能,包括数据的添加、删除、统计以及复杂的业务逻辑。这种做法降低了代码的复杂度,提高了开发效率,使得前端开发者能够更加专注于...
toggleClass() 方法用于从匹配的元素中添加或删除一个类。 语法:`$(selector).toggleClass(className)` 参数: * `selector`:选择器,用于选择要添加或删除类的元素。 * `className`:要添加或删除的类名。 ...
- `$.extend(prop)` - 扩展jQuery对象,添加新的方法或属性。 - `jQuery( expression, [context] )` - 选择元素,`expression`是选择器,`context`是可选的上下文元素。 13. **遍历函数**: - `each( callback )...
根据提供的文件信息,我们可以归纳出一系列关于jQuery的重要知识点与用法。...以上是基于提供的文件内容整理出来的jQuery知识点概览,这些基本的方法和功能可以帮助开发者更高效地操作DOM元素,实现丰富的动态效果。
jQuery 是一个广泛使用的JavaScript库,它...jQuery方法提供了丰富的功能,简化了JavaScript中的DOM操作,使得网页动态效果的实现变得更加容易和高效。通过熟练掌握这些方法,开发者可以更便捷地构建交互式的Web应用。
### JQUERY 常用方法大全 #### 一、Attribute(属性操作) 1. **`.addClass()`** - **用途**:为匹配元素添加一个或多个类。 - **示例**: ```javascript $("p").addClass("highlight"); ``` 这将为所有的`...
本示例主要讲解如何使用jQuery动态地在表格中添加和删除一行数据,这对于构建可交互的用户界面非常有用。 首先,我们来看一下HTML结构。这个示例中有一个表格,包含两列:姓名和地址,每行都有一个删除按钮。表格...
jQuery框架是JavaScript的一个库,它极大地简化了DOM操作、事件处理、动画设计和Ajax交互。这个框架使得前端开发更为高效和简洁。...通过熟练掌握这些方法,开发者可以更高效地进行前端开发,提高工作效率。
- **$.fn.extend()**:扩展jQuery原型,用于添加新的方法给jQuery对象。 - **$().click(function(){...})**:为元素绑定点击事件。 - **$("div>p").css("border","1px solid gray")**:为div的子节点p添加样式。 - *...
综上所述,Java中的动态插入和删除节点主要通过前端技术实现,尤其是利用jQuery库简化DOM操作。掌握这些技巧,可以让你构建出更加灵活和交互丰富的Web应用程序。在实际项目中,配合服务器端的Java代码,可以实现更...
这个库的主要优点在于其易用性和丰富的功能,使得开发者能够快速实现动态效果和交互。以下是对标题“jQuery 使用方法”和描述中提及的知识点的详细解释: ### 一、选择网页元素 jQuery 的核心功能是选择网页元素并...
### Jquery常用方法详解 #### 属性操作 (Attribute) 1. **添加样式**: `$("p").addClass(css中定义的...以上介绍了JQuery中的一些核心方法及其使用场景,这些方法可以帮助开发者更加高效地进行网页的动态管理和交互。
jQuery 是一个流行的 JavaScript 库,它简化了DOM操作、事件处理、动画效果和Ajax交互。以下是对标题和描述中提到的jQuery事件方法的详细说明: ...通过熟练掌握这些方法,开发者可以更高效地进行网页交互和动态更新。
"jQuery复制移除表单元素代码.zip"这个资源包含了一个使用jQuery 1.7.2版本实现的功能,即动态复制和删除表单元素。以下是关于这个主题的详细知识点: 1. **jQuery基本概念**: - jQuery是John Resig于2006年创建...