layui 框架js改变dom后,radio标签点击无效

 let form2;
    let ctx="${pageContext.request.contextPath}";
    $(function(){
        layui.config({
            base: ctx+'/layui/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index','form', 'table','layer'], function(){
            layerDom = layui.layer;
            table = layui.table;
            form2 = layui.form;
            // ajax请求获取数据
            getData(start,count,true);
        });
    });

getData() 方法核心内容

function getData(start, count, flag){

	var storageId = $('input[name="storageId"]').filter(':checked').val();
	if(storageId == "" || storageId == undefined || storageId ==null){
		storageId = "";
	}

	$.ajax({
		type:"post",
		url:basePath + "path",
        data:{
            page: start,
            limit: count,
            storageCenterId: storageId
        },
		success:function(result){
			//解决数据叠加问题
			var data = JSON.parse(result);
            var code = data.code; //0 成功  1失败
            if(code == "1"){
			// 拼接js到页面
			
			var strlist = "";
				storageList.forEach(function(item, index) {
					var name = item.storageName;
					var sid = item.storageId;
					if(index == 0){
						strlist =
						`<li>
							<label class="clearfix" onclick="changeVideo('${sid}', '${index}')">
								<p>${name}</p>
								<span><input title="默认" checked="checked" value="0" name="storageId" type="radio"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><div>默认</div></div></span>
							</label>
							</li>`;
					} else {
						strlist +=
						`<li>
							<label class="clearfix" onclick="changeVideo('${sid}', '${index}')">
								<p>${name}</p>
								<span><input title="默认" value="1" name="storageId" type="radio"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>默认</div></div></span>
							</label>
							</li>`;
						}
				});
				$(".storageList").empty();
				$(".storageList").html(strlist);
				····
				····
				 form2.render(); // 最关键的步骤,一定要重新渲染一下页面

解决方法是,在改变html内容之后,一定要用form或table或其它对象,重新渲染一下,调用render()方法,即可。

猜你喜欢

转载自my.oschina.net/u/2301293/blog/2209033