当jQuery动态添加遇到laydate

最新推荐文章于 2023-08-22 14:15:13 发布

luobingit

最新推荐文章于 2023-08-22 14:15:13 发布

阅读量2k

点赞数 4

分类专栏：【前端】文章标签： laydate jQuery动态生成 layUI

本文链接：https://blog.csdn.net/qq_40822742/article/details/102691627

版权

【前端】专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery动态添加laydate解决方案

今天做项目的某个模块功能，需要jQuery动态添加laydate来实现，上图：
在这里插入图片描述
每点击添加一次就要生成一个laydate框，开始直接绑定css实现，发现已有的输入框可以正常弹出laydate，但是点击添加按钮生成出来的却没反应，在网上找了好久，还学到了一个前端名词事件委托(本人搞java的不懂这些，见笑了)，然后尝试用事件委托来实现，初次尝试如下（#timediv为laydate框最外层包裹的div）：
在这里插入图片描述
发现确实可以显示，但是会闪一下，然后在layUI官网看到一个小姐姐是这样写的：

这样比上面好很多，可以直接点击就显示，但是还是不完美，弹出的时间选择框会抖动一下，后面发现有大佬在layUI论坛是这样做的，每次动态生成时，写laydate渲染一次，完美解决这个问题，如下：

layui.use(['form', 'table', 'laydate', 'layer', 'upload'], function () {
    var form = layui.form,
        table = layui.table,
        laydate = layui.laydate,
        layer = layui.layer,
        upload = layui.upload;
    var $ = layui.jquery;
    
     //时间选择器
      lay(".advanceDate").each(function(){ 
    	laydate.render({ 
    	elem: this 
    	,type: 'time'
    	,format: 'HH:mm'
      }); 
  	}); 
        
     //动态添加
    $("#add").click(function(){ 
        $("#timediv").append('<input style="margin-bottom:5px;" type="text"  name="addTitle" placeholder="请选择活动开始时间" lay-verify="required" lay-reqtext="活动开始时间不能为空"  autocomplete="off" class="layui-input advanceDate">'); 

         lay(".advanceDate").each(function(){ 
        	laydate.render({ 
        	elem: this 
        	,type: 'time'
        	,format: 'HH:mm'
        	,trigger: 'click'     //点击触发
          }); 
      	});  
    });  

})