问题遇到的现象和发生背景
求解数据库加载出来的数据点击删除或者修改无法弹出模态框.检查过后端没有问题.
jquery,bootstrap
问题相关代码，请勿粘贴截图
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引入 Bootstrap -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<!-- 引入 font-awesome -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>宿舍管理系统</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<!-- 顶部搜索部分 -->
<div class="panel panel-default">
<div class="panel-heading">搜索</div>
<div class="panel-body">
<form role="form" class="form-inline" action="/dormitoryAdmin?method=search" method="post">
<div class="form-group">
<label for="name">字段：</label>
<select name="key" class="form-control">
<option value="XM">姓名</option>
<option value="SFZ">身份证</option>
<option value="SJHM">手机号码</option>
</select>
</div>
<div class="form-group" style="margin-left: 20px">
<label for="value">值：</label>
<input type="text" class="form-control" name="value" placeholder="字段值" maxlength="12" style="width: 130px">
</div>
<div class="form-group " style="margin-left: 20px">
<button type="submit" class="btn btn-info ">
<span style="margin-right: 5px"
class="glyphicon glyphicon-search" aria-hidden="true">
</span>开始搜索
</button>
</div>
<div class="form-group " style="margin-left: 48px">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#addUserModal">
<span style="margin-right: 5px" class="" aria-hidden="true">
<i class="fa fa-user-plus">添加学生信息</i>
</span>
</button>
</div>
</form>
</div>
</div>
<!-- 列表展示-->
<div class="table-responsive">
<table class="table table-hover ">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>身份证</th>
<th>手机</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="dormitoryAdmin">
<tr>
<td>${dormitoryAdmin.UUID}</td>
<td>${dormitoryAdmin.XM}</td>
<td>${dormitoryAdmin.SFZ}</td>
<td>${dormitoryAdmin.SJHM}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default "
data-UUID="${dormitoryAdmin.UUID}"
data-XM="${dormitoryAdmin.XM}"
data-SFZ="${dormitoryAdmin.SFZ}"
data-SJHM="${dormitoryAdmin.SJHM}"
data-toggle="modal"
data-target="#updateUserModal">
<i class="fa fa-user-o">修改</i>
</button>
<button type="button" class="btn btn-danger "
data-id="${dormitoryAdmin.UUID}"
data-toggle="modal"
onclick="" data-target="#delUserModal">
<i class="fa fa-user-times">删除</i>
</button>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- update框示例（Modal） -->
<form method="post" action="/dormitoryAdmin?method=save" class="form-horizontal" style="margin-top: 0px" role="form"
id="form_data" style="margin: 20px;">
<div class="modal fade" id="updateUserModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">用户信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="user_id" class="col-sm-3 control-label">ID</label>
<div class="col-sm-9">
<input type="text" readonly required class="form-control" id="id"
name="id">
<input type="hidden" name="oldDormitoryId" id="oldDormitoryId"/>
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 control-label">宿舍</label>
<div class="col-sm-9">
<select class="form-control" name="dormitoryId">
<c:forEach items="${dormitoryList}" var="dormitory">
<option class="dormitory" value="${dormitory.id}">${dormitory.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 control-label">学号</label>
<div class="col-sm-9">
<input type="text" required class="form-control" id="number"
name="number" value="" placeholder="请输入学号">
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 control-label">姓名</label>
<div class="col-sm-9">
<input type="text" required class="form-control" id="name"
name="name" value="" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 control-label">性别</label>
<div class="col-sm-9">
<input type="radio" checked value="男" class="gender"
name="gender"> 男
<input type="radio" value="女" class="gender"
name="gender"> 女
</div>
</div>
<div class="form-group">
<label for="user_id" class="col-sm-3 control-label">入住时间</label>
<div class="col-sm-9">
<input type="text" readonly class="form-control" id="createDate">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
</form>
<!-- 删除模态框示例（Modal） -->
<form method="post" action="/student?method=delete"
class="form-horizontal" style="margin-top: 0px" role="form"
id="form_data" style="margin: 20px;" >
<div class="modal fade" id="delUserModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel1">用户信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-9">
<h3 class="col-sm-18 control-label" id="deleteLabel">删除信息</h3>
<input type="hidden" class="form-control" id="tab"
name="tab" placeholder="" value="dor_admin"> <input
type="hidden" class="form-control" id="id"
name="id" placeholder="">
<input type="hidden" name="dormitoryId" id="dormitoryId"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-danger" >删除</button>
<span id="tip"> </span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$('#updateUserModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var dormitoryId = button.data('dormitory-id')
var number = button.data('number')
var name = button.data('name')
var gender = button.data('gender')
var createDate = button.data('create-date')
var modal = $(this)
modal.find('.modal-title').text('修改学生信息')
modal.find('#id').val(id)
modal.find('#number').val(number)
modal.find('#name').val(name)
modal.find('#createDate').val(createDate)
modal.find('#oldDormitoryId').val(dormitoryId)
var list = modal.find('.gender')
for(var i=0;i<list.length;i++){
if(gender == $(list.get(i)).val()){
$(list.get(i)).prop('checked',true)
}
}
var list2 = modal.find('.dormitory')
for(var i=0;i<list2.length;i++){
if(dormitoryId == $(list2.get(i)).val()){
$(list2.get(i)).prop('selected',true)
}
}
})
$('#delUserModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('.modal-title').text('删除学生信息')
modal.find('#deleteLabel').text('是否删除ID为 ' + id + ' 的信息')
modal.find('#id').val(id)
})
</script>
</body>
</html>
运行结果及报错内容
前端不报错
我的解答思路和尝试过的方法
网上查阅资料所有的方法都无法解决,版本我也尝试过更改,都不行
我想要达到的结果
能够正常弹出模态框
