Jquery實現div區域性頁面重新整理中js渲染失效問題解決
阿新 • • 發佈：2020-12-02
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載入失敗等問題。
弄了一下午才弄出來的，如果對入坑的小夥伴有幫助就關注一下就好啦。