栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jQuery中clone()函数实现表单中增加和减少输入项

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jQuery中clone()函数实现表单中增加和减少输入项

之前一直没有深入了解到clone()函数的方法,所以对应表单中增加和减少输入项一直使用如:

var copy_html=$(选择器).html(); 
alert(copy_html);

问题在于得出的copy_html直接是HTML内容代码,未经过object封装,而使用:

var copy_html=$(选择器).clone(); 
alert(copy_html);

得出未object对象类型,若$(选择器)包含了某个触发,如 onclick,如果想copy_html继续沿用onclick方法,只需添加true:clone(true)使用。

直接上图:

点击“+”,拷贝自身,并在自身之前追加:

增加方法:

$(function(){  
//增加省份、招生人数
  $(".addbtn").click(function(){
    var copy_str=$(this).parents(".form-group").clone();
    copy_str.find("i").removeClass("fa-plus").addClass("fa-minus");    //将按钮图标“+”,变为“-”    
    copy_str.find("button").removeClass("addbtn");             //去除class名“addbtn”,避免新增的输入项沿用此添加方法
    copy_str.find("button").attr("onclick","canelf(this)");          //增加点击删除自身触发事件
    $(this).parent().parent().parent().before(copy_str);          //追加
  });
});
//增加项,删除方法
function canelf(e){
  $(e).parent().parent().parent().remove();
}

最后贴上HTML代码:












以上所述是小编给大家介绍的jQuery中clone()函数实现表单中增加和减少输入项,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/87773.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号