在花了相当多的时间研究和调试这些问题之后，我终于束手无策，希望得到一些帮助:
问题: Modal 不显示插入其 INPUT 字段的变量。
背景信息: 我正在从逐行显示的 MySQL 表中提取记录，并在每行的最后一列放置一个“编辑”按钮。编辑按钮应该启动一个模式，其中填充了每个输入字段中的记录数据，允许用户编辑记录。
到目前为止我尝试过的:
- 通过查看源代码中打印的内容来检查生成的变量是否为空。所有变量均正确生成并且确实打印了值。
- 我复制了 #MyModal JS 和
<div>来自官方文档，但也无法使其工作( Link ) - 从网络上的另一个线程复制了适用于其他用户的#EDIT 模式
- 包含来自 Google 和 MaxCDN 的引用，而不是我自己的 JS Bootstrap/jQuery/CSS 本地副本
- 尝试在我的 XAMPP 服务器上运行代码，但没有成功，显示了一些症状
- 在 IE/Chrome/Firefox/Safari (MAC) 中打开网站，结果相同
- 成功地运行了 JS Fiddle 并移交了变量，这让我认为可能存在我不知道的服务器问题/配置要求 ( LINK )
代码:
<html>
<head>
<!-- include jQuery 3.1.0 + jQuery CSS + min JavaScript -->
<!-- latest jQuery 3.1.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JavaScript for Modal, #MyModal is straight from the documentation, #edit is a solution I got off the web -->
<script>
$('#edit').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
});
$('#myModal').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
var dataTime = $(e.relatedTarget).data('time');
$(e.currentTarget).find('input[name="dataTime"]').val(dataTime);
var dataStaff = $(e.relatedTarget).data('staff');
$(e.currentTarget).find('input[name="dataStaff"]').val(dataStaff);
var dataDept = $(e.relatedTarget).data('dept');
$(e.currentTarget).find('input[name="dataDept"]').val(dataDept);
var dataProb = $(e.relatedTarget).data('prob');
$(e.currentTarget).find('input[name="dataProb"]').val(dataProb);
var dataGuest = $(e.relatedTarget).data('guest');
$(e.currentTarget).find('input[name="dataGuest"]').val(dataGuest);
var dataRoom = $(e.relatedTarget).data('room');
$(e.currentTarget).find('input[name="dataRoom"]').val(dataRoom);
});
</script>
<!-- End of Modal Javascript -->
</head>
<body>
<table>
<tr>
<td>
<label>Button for Modal #MYMODAL"</label>
</td>
<td>
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#myModal" data-keyboard="true"
data-id="1234"
data-date="2001-01-31"
data-time="13:00"
data-staff="Some Name"
data-dept="Some Department"
data-prob="Problem"
data-guest="Guest Name"
data-room="1111" >Modal 1</button>
</td>
</tr>
<tr>
<td>
<label>Button for Modal #EDIT"</label>
</td>
<td>
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#edit" data-keyboard="true"
data-id="1234"
data-date="2001-01-31">Modal 2</button>
</td>
</tr>
</table>
<!-- Modal MYMODAL -->
<div class="modal modal-primary modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Record</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>ID No.: </td>
<td>
<input type="text" id="dataID" name="dataID" value="" disabled />
</td>
</tr>
<tr>
<td>Date: </td>
<td>
<input type="date" id="dataDate" name="dataDate" value="" />
</td>
</tr>
<tr>
<td>Time: </td>
<td>
<input type="time" id="dataTime" name="dataTime" value="" />
</td>
</tr>
<tr>
<td>Staff: </td>
<td>
<input type="text" name="dataStaff" value="" />
</td>
</tr>
<tr>
<td>Department: </td>
<td>
<input type="text" name="dataDept" value="" />
</td>
</tr>
<tr>
<td>Problem: </td>
<td>
<input type="text" name="dataProb" value="" />
</td>
</tr>
<tr>
<td>Guest: </td>
<td>
<input type="text" name="dataGuest" value="" />
</td>
</tr>
<tr>
<td>Room No.: </td>
<td>
<input type="text" name="dataRoom" value="" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.Modal MYMODAL -->
<!-- Modal EDIT-->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Details</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>ID No.: </td>
<td>
<input type="text" id="dataID" name="dataID" value="" disabled />
</td>
</tr>
<tr>
<td>Date: </td>
<td>
<input type="date" id="dataDate" name="dataDate" value="" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.Modal EDIT -->
</body>
</html>
最佳答案
您的脚本需要位于底部，在 html 之后。我相信当你的脚本执行时，html还不存在。
关于javascript - JS Modal 不在输入字段中显示变量 - 服务器配置要求？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39526155/