使用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
分享到:
相关推荐
Dom: Attribute: $("p").addClass(css 中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test...$("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理) 。。。。。。
3.8.1 :input 56 3.8.2 :text 57 3.8.3 :password 57 3.8.4 :radio 57 3.8.5 :checkbox 58 3.8.6 :submit 58 3.8.7 :image 58 3.8.8 :reset 58 3.8.9 :button 58 3.8.10 :file 59 3.8.11 :hidden 59 3.9 表单对象...
$("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理) $("元素名称").empty() 将该元素的内容设置为空 $("元素名称").insertAfter(content); 将该元素插入到content之后 $("元素...
当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 <script type="text/javascript" src="jquery.js"> ...
JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...
menu:'findItem'方法允许用户通过任意参数查找菜单项; menubutton:添加'showEvent'和'hideEvent'属性。 New Plugin(新组件) maskedbox:'maskedbox'组件将会强制用户输入的内容。 jQuery EasyUI 1.5.4 版本...
jQuery EasyUI 1.5.5版本更新...menu:'findItem'方法允许用户通过任意参数查找菜单项; menubutton:添加'showEvent'和'hideEvent'属性。 New Plugin(新组件) maskedbox:'maskedbox'组件将会强制用户输入的内容。
$.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...
17 使用jquery来判断浏览器大小添加不同的class $ document ready function { function checkWindowSize { if $ window width > 1200 { $ "body" addClass "large" ; } else { $...
var _input = $(input).clone(true); _input.css("height",$(input).css("height")); _input.css("width", $(input).css("width")); var border =_input.css("border"); this.successIconClass = "icon-tick";/...
jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector ...
:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象属性 :enabled :disabled :checked :selected 文档处理 内部插入 append(content) appendTo...
:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象属性 :enabled :disabled :checked :selected 文档处理 内部插入 append(content) appendTo...
那么很显然,我们就只能换个思路,把这个input元素复制一个,然后将原来的删除。 在IE下复制元素的时候,其中的值是不会被复制的,所以就达到了清空文件域的目的了。 而在Firefox下,其中的值也会被一同复制,那么...
• menu:'findItem'方法允许用户通过任意参数查找菜单项; • menubutton:添加'showEvent'和'hideEvent'属性。 New Plugin(新组件) • maskedbox:'maskedbox'组件将会强制用户输入的内容。