使用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(); } }); });
最后效果如下图: