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()方法,即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章