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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Rec_Mervyn/article/details/83242833

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

其中我在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 = '<tr>'+
    '	<td><input type="text" class="layui-input dateInput" id="date_'+idNum+'"></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>';
    $(html).appendTo($('#table tbody:last'));
    //重新渲染日期选择input，并指向添加的id
    laydate.render({
        elem: '#date_'+idNum
        ,trigger: 'click' //采用click弹出
    });
});

---

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