动态添加的input怎么绑定laydate?

提问 已结
16 446
南鸢000
南鸢000 2018-6-13
悬赏:20飞吻
版本:layui 2x 浏览器:Chrome
如图,通过jquery动态添加、关闭input组,需要给input绑定laydate,没有id要怎么设置?
试过用class选择器,只有第一个input成功,后面的绑定不成功,input是拼接的HTML代码
回帖
  • 随海逸
    2018-6-13
    可以传入DOM元素的,用DOM就好了啊
    0 回复
  • 随海逸
    2018-6-13
    就好比ajax一样,成功后再去绑定就好了
    0 回复
  • 南鸢000
    2018-6-13
    @随海逸 问题是没有id
    0 回复
  • Hink745
    2018-6-13

    给你一个思路,了解一下
    遍历的操作(i,obj){

    str = '<input id="test'+i+'">';

    $('.laydateBox').append(str);

    laydate.render({
    elem: '#test'+i
    });

    0 回复
  • 南鸢000
    2018-6-13
    @随海逸 是这意思吗?貌似不行,还是我获取id方式不对?
     onclick="getTime(this)"

    function getTime(that){

    var routeTime = {
    max: '2099-06-16 23:59:59',
    format: 'yyyy-MM-dd HH:mm:ss',
    type: 'datetime',
    value: new Date()
    };

    routeTime.elem = that;
    laydate.render(routeTime);
    }
    0 回复
  • 南鸢000
    2018-6-13
    @Hink745 我每次只点击一个,怎么遍历[汗]
    0 回复
  • 随海逸
    2018-6-13
    0 回复
  • 随海逸
    2018-6-13
    @南鸢000 你的那个写法是点击那个input的时候触发的时间,顺序有点乱了,理清楚顺序
    0 回复
  • 南鸢000
    2018-6-13
    @随海逸 给你看看我全部的代码
    //表单中的div
    <div class="layui-form-item layui-inline course" id="course">
    <label class="layui-form-label">路线信息:</label>
    <div class="layui-input-inline">
    <input type="text" placeholder="时间1" autocomplete="off" onclick="getTime(this)" lay-verify="required" onkeyup="eventCourseMsg();" class="layui-input time1 routeTime">
    </div>
    <div class="layui-input-inline">
    <input type="text" placeholder="大事件1" autocomplete="off" lay-verify="required" onkeyup="eventCourseMsg();" class="layui-input incident1">
    </div>
    <div class="layui-input-inline">
    <a class="layui-btn layui-btn-normal" id="addline"><i class="layui-icon"></i></a>
    </div>
    </div>

    //添加input组代码
    //路线信息
    $("#addline").on("click",function () {
    $("form .course:last").after(
    '<div class="layui-form-item layui-inline course">'+
    '<label class="layui-form-label" style="color: white;">路线信息:</label>'+
    '<div class="layui-input-inline">'+
    '<input type="text" placeholder="时间'+j+'" id="routeTime'+j+'" onclick="getTime(this);" lay-verify="required" autocomplete="off" onkeyup="eventCourseMsg();" class="layui-input time'+j+'">'+
    '</div><div class="layui-input-inline">'+
    '<input type="text" placeholder="大事件'+j+'" lay-verify="required" autocomplete="off" onkeyup="eventCourseMsg();" class="layui-input incident'+j+'">'+
    '</div><div class="layui-input-inline">'+
    '<a class="layui-btn layui-btn-normal" onclick="delecourseMsg(this)"><i class="layui-icon" style="font-size: 17px">ဆ</i></a>'+
    '</div></div>'
    );
    j++;
    });

    //时间选择器
    function getTime(that){
    var routeTime = {
    max: '2099-06-16 23:59:59',
    format: 'yyyy-MM-dd HH:mm:ss',
    type: 'datetime',
    value: new Date()
    };
    routeTime.elem = that;
    laydate.render(routeTime);
    }

    //将input组中的数据放入隐藏input
    function courseMsg(){
    var course ="";
    for(y=1;y<=j;y++){
    var time=($(".course .time"+y+"").val()=="undefined"?"":$(".course .time"+y+"").val()+",");
    var incident=($(".course .incident"+y+"").val()=="undefined"?"":$(".course .incident"+y+"").val()+"|");
    if(time.indexOf("undefined") == -1){
    course +=time;
    if(incident.indexOf("undefined") == -1 ){
    course +=incident;
    }
    }
    }
    return course;
    }
    window.eventCourseMsg=function(){
    $("#coursemsg").val(courseMsg());
    }
    0 回复
  • 南鸢000
    2018-6-13
    @随海逸 全局变量var i=2,j=2,x,y;
    0 回复
  • 南鸢000
    2018-6-13
    @随海逸 这是之前写的,这种写法是没问题,感觉是dom传递对象出了问题
                    //时间选择器
    var start = {
    max: '2099-06-16 23:59:59',
    format: 'yyyy-MM-dd HH:mm:ss',
    type: 'datetime',
    value: new Date(),
    show: true
    ,done: function(value){
    end.min = value; //开始日选好后,重置结束日的最小日期
    end.start = value //将结束日的初始值设定为开始日
    }
    };
    var end = {
    max: '2099-06-16 23:59:59',
    format: 'yyyy-MM-dd HH:mm:ss',
    type: 'datetime',
    value: new Date(),
    show: true
    ,done: function(value){
    start.max = value; //结束日选好后,重置开始日的最大日期
    }
    };
    $('#startTime').on('click',function (){
    start.elem = this;
    start.closeStop = this
    laydate.render(start);
    });
    $('#endTime').on('click',function (){
    end.elem = this;
    end.closeStop = this
    laydate.render(end);
    });
    0 回复
  • 随海逸
    2018-6-13
    @南鸢000 你试试在你的j++;之后使用加上这段js
    getTime( $("form .course:last").find(".time" + --j)[0])
    0 回复
  • 南鸢000
    2018-6-14
    @随海逸 不可行
    0 回复
  • 南鸢000
    2018-6-14
    @随海逸 已解决
           //时间选择器
    window.eventGetTimes = function (that){
    var routeTime = {
    max: '2099-06-16 23:59:59',
    format: 'yyyy-MM-dd HH:mm:ss',
    type: 'datetime',
    value: new Date()
    };
    routeTime.elem = that;
    laydate.render(routeTime);
    }



    //调用
    onclick="eventGetTimes(this);"
    0 回复
  • 随海逸
    2018-6-14
    @南鸢000 嗯嗯 解决了就行,没帮到你抱歉
    0 回复
  • 南鸢000
    2018-6-14
    @随海逸 没事,感谢[嘻嘻]
    0 回复