Jquery实现div局部页面刷新中js渲染失效问题解决
layui.jsp：
<link rel="stylesheet" href="<%=basePath%>/layui/css/layui.css">
<script type="text/javascript" src="<%=basePath%>/layui/layui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=basePath%>/js/GoodsMange.js"></script>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">家居销售</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a>商品管理</a>
<dl class="layui-nav-child">
<dd data-id="addGoods"><a>商品添加</a></dd>
<dd data-id="delGoods"><a>商品删除</a></dd>
<dd data-id="updGoods"><a>商品修改</a></dd>
</dl>
</li>
GoodsMange.js:
$(function(){
$(".layui-nav-child").on("click", "dd", function(){
var sId = $(this).data("id"); //获取data-id的值
window.location.hash = sId; //设置锚点
loadInner(sId);
});
function loadInner(sId){
var sId = window.location.hash;
var pathn, i;
switch(sId){
case "#addGoods": pathn = "addGoods.jsp"; i = 1; break;
case "#delGoods": pathn = "deleteGoods.jsp"; i = 1; break;
case "#updGoods": pathn = "updateGoods.jsp"; i = 1; break;
default: pathn = "empty.jsp"; i = 0; break;
}
$("#content").load(pathn); //加载相对应的内容
var sId = window.location.hash;
}
loadInner(sId);
$(".layui-nav-child dd").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
});
然后大家必须要注意，因为是在div标签中加载其他jsp中的内容，所以要加载的jsp不能有和父页面相同的标签。比如<html> <head><body>等等。
addGoods.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="=<%=basePath%>/layui/layui.js"></script>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>商品添加</legend>
</fieldset>
<form class="layui-form" action="GoodsController/addGoods">
<div class="layui-form-item">
<label class="layui-form-label">商品名称:</label>
<div class="layui-input-block">
<input type="text" name="goods_Name" lay-verify="title" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
</div>
</div>
<!-- 上传图片 -->
<div class="layui-form-item">
<label class="layui-form-label">商品图片:</label>
<div class="layui-input-block">
<input type="hidden" id="img_url">
<input name="images_Url" onchange="showImg()" type="file" id="img_file">
<img src="" alt="Image preview..." id="img_id" style="width: 100px">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">商品价格</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">上传日期</label>
<div class="layui-input-inline">
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">本店活动</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">上传者</label>
<div class="layui-input-inline">
<input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">店名</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">商品详情</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">材质</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择材质</option>
<option value="人造板">人造板</option>
<option value="木">木</option>
<option value="金属">金属</option>
<option value="麻">麻</option>
<option value="香樟木">香樟木</option>
<option value="绒质">绒质</option>
<option value="铁质">铁质</option>
<option value="塑料">塑料</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">家具类型</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="衣柜">衣柜</option>
<option value="书柜">书柜</option>
<option value="床头柜">床头柜</option>
<option value="鞋柜">鞋柜</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">风格</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择风格</option>
<option value="简约现代">简约现代</option>
<option value="北欧风格">北欧风格</option>
<option value="明清古典">明清古典</option>
<option value="现代中式">现代中式</option>
<option value="欧式">欧式</option>
<option value="轻奢">轻奢</option>
<option value="美式乡村">美式乡村</option>
<option value="日式">日式</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">货源地</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled="">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
<!--<div class="layui-form-item layui-form-text">
<label class="layui-form-label">编辑器</label>
<div class="layui-input-block">
<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
</div>
</div>-->
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
form.render();
//日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听指定开关
form.on('switch(switchTest)', function(data){
layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
});
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
//表单赋值
layui.$('#LAY-component-form-setval').on('click', function(){
form.val('example', {
"username": "贤心" // "name": "value"
,"password": "123456"
,"interest": 1
,"like[write]": true //复选框选中状态
,"close": true //开关状态
,"sex": "女"
,"desc": "我爱 layui"
});
});
//表单取值
layui.$('#LAY-component-form-getval').on('click', function(){
var data = form.val('example');
alert(JSON.stringify(data));
});
});
</script>
<script>
function showImg(){
// var img_file = $("#img_file").val();
var file = document.getElementById('img_file').files[0];
var re = new FileReader();
re.readAsDataURL(file);
re.onload = function(re){
$('#img_id').attr("src", re.target.result);
}
}
</script>
在script标签加上：
form.render();
即可。
每一次加载该页面，js都会进行一次渲染，这样的话就不会出现js渲染失效或者js加载失败等问题。
弄了一下午才弄出来的，如果对入坑的小伙伴有帮助就关注一下就好啦。
浙公网安备 33010602011771号