动态添加的layui date标签,不弹出日期选择

之前有一篇文章提到动态添加、删除一行的实现方法

其中我在table里有laydate元素,动态添加的laydate不弹出日期选择,根据class渲染的时候会出现出了第一个可以正常显示,别的都闪退的情况。

最终是在每次添加的时候都对新添加的元素进行ID重新渲染才解决的。

为了避免ID重复,给了一个随机数。


表格及初始渲染

<table class="layui-table" id="table" lay-filter="table">
	<thead>
		<tr>
			<td>时间td>
			<td>操作td>
		tr>
	thead>
	<tbody>
		<tr>
			<td><input type="text" class="layui-input dateInput">td>
			<td>
				<a class="layui-btn layui-btn-xs add">添加a>
				<a class="layui-btn layui-btn-danger layui-btn-xs del">删除a>
			td>
		tr>
	tbody>
table>
layui.use(['laydate', 'table'], function() {
    var laydate = layui.laydate;
    var table = layui.table;
    
    //原有表格日期渲染
    laydate.render({
        elem: '.dateInput'
        ,trigger: 'click' //采用click弹出
    });
});

添加按钮事件

//随机数生成
function getRandomNum() {
    return parseInt(Math.random()*50);
}

$('body').on('click', '.add', function() {
	var idNum = getRandomNum();//获取随机数
	var html = ''+
    '	+idNum+'">'+
    '	'+
    '		添加'+
    '		删除'+
    '	'+
    '';
    $(html).appendTo($('#table tbody:last'));
    //重新渲染日期选择input,并指向添加的id
    laydate.render({
        elem: '#date_'+idNum
        ,trigger: 'click' //采用click弹出
    });
});

这样每次动态添加一个,就重新渲染,并指向新添加的元素。

你可能感兴趣的:(前端)