弹出框动态增加input输入框

欢迎关注微信公众号： 程序员小圈圈
原文首发于： www.zhangruibin.com
本文出自于： RebornChang的博客
转载请标明出处^_^

弹出框动态增加input输入框

最近项目上有这么一个需求，一条订单，我想动态的输入外部订单号，支持输入多个外部订单号，当外部订单号为空的时候，可以新增外部订单号。当输入过外部订单号的时候，可以对外部订单号进行修改，也就是旧有外部订单号要回显。
那我们先来看一下效果吧：

这样就涉及到一点前台知识了：弹出层动态增加input输入框

首先说下前台涉及的技术：
1.jQuery
2.bootstrap
3.layui
jQuery帮我们简化代码，bootstrap提供一点基本的样式，layui我们使用layer做弹出层以及layui的弹出层样式。

那么确定好前台界面使用的技术之后，我们开始编写这么一个弹出层。

页面声明DIV

在引入了jQuery，bootstrap，layui的前提下，首先需要在页面生成一个div然后我们使用js方法对其内容进行动态的拼接展示：

<div id="index-div" class="site-text" style="margin: 5%; display: none">
</div>

点击增加外部订单号的时候触发事件

function addOrderExternalNum(e) {
    var html = "";
    html += '<div class="form-group">';
    html += '<div class="col-sm-9 col-md-9 col-xs-9">';
    html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="请填外部订单编码"/>';
    html += '</div>';
    html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
    html += '<a href="javascript:;" class="addInputReturn" >';
    html += '<span class="glyphicon glyphicon-plus"></span>';
    html += '</a>';
    html += '</div>';
    html += '</div>';

    $("#index-div").append(html)
    //orderId，orderNum，是按钮点击事件获取到的自定义参数
    var orderId = $(e).attr("orderId");
    var orderNum = $(e).attr("orderNum");
    //使用layer.open打开一个弹出层
    layer.open({
        type: 1 //Page层类型
  ,skin: 'layui-layer-molv'
  ,area: ['30%', '380px']
        ,title: ['添加外部订单编码','font-size:18px']
        ,btn: ['确定', '关闭']
        ,shadeClose: true
  ,shade: 0 //遮罩透明度
  ,maxmin: false //允许全屏最小化
  ,content:$("#index-div")
        ,success:  function(){
            $(&#