網頁源碼：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="div_list"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><th>學號</th><th>操作</th></tr><tr><td>{{ foo.stu_num }}</td><td><button type="button" class="button button-glow button-border button-rounded button-primary" data-toggle="modal" data-target="#myModal" data-whatever="參數">添加</button></td></tr></tbody></table> </div>

data-whatever：通過data-whatever="值"將值傳遞給模態框

模態框源碼：

{# 修改模態框#}<form action="" method="post"><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title" id="myModalLabel">添加成績</h4></div><div class="modal-body"><table><tr><td>學號：</td><td><input type="text" name="stu_num" class="put" id="recipient-name"/></td></tr><tr><td>姓&nbsp;&nbsp;&nbsp;名：</td><td><input type="text" name="stu_name" class="put" /></td></tr><tr><td>班&nbsp;&nbsp;&nbsp;級：</td><td><input type="text" name="stu_class" class="put" /></td></tr><tr><td>科&nbsp;&nbsp;&nbsp;目：</td><td><input type="text" name="course_name" class="put" /></td></tr><tr><td>成&nbsp;&nbsp;&nbsp;績：</td><td><input type="text" name="scroe_grade" class="put" /></td></tr><tr><td>專&nbsp;&nbsp;&nbsp;業：</td><td><input type="text" name="major" class="put" /></td></tr></table></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><!-- /.modal-content --></div><!-- /.modal --></div></form> {% url 'modify' %}：提交數據的地方
js源碼： <script>?//綁定模態框展示的方法?$('#myModal').on('show.bs.modal',?function?(event)?{??var?button?=?$(event.relatedTarget);//?觸發事件的按鈕??var?recipient?=?button.data('whatever');//?解析出whatever內容??var?modal?=?$(this);//獲得模態框本身modal.find('.modal-title').text('學生學號:'?+?recipient);?// 更改將title的textmodal.find('.modal-body?input').val(recipient)??})?? </script>?

報錯：

百度了一下，有人說是js沒下載在到本地，引用導致的錯誤，原文地址：https://www.cnblogs.com/zr123/p/9590989.html

我的解決方法是：將js代碼改為：

<script>?//綁定模態框展示的方法?$('#myModal').on('show.bs.modal',?function?(event)?{??var?button?=?$(event.relatedTarget);//?觸發事件的按鈕??var?recipient?=?button.data('whatever');//?解析出whatever內容??var?modal?=?$(this);//獲得模態框本身modal.find('#myModalLabel').text('學生學號:'?+?recipient);?// 更改將title的textmodal.find('#recipient-name').val(recipient)??})?? </script>?

將其中的

modal.find('#myModalLabel').text('學生學號:'?+?recipient);?// 更改將title的text modal.find('#recipient-name').val(recipient)?
find（）函數中的css名稱改為id就好了。

轉載于:https://www.cnblogs.com/I-love-Xiang/p/10798867.html

總結

以上是生活随笔為你收集整理的模态框之Uncaught Error: Syntax error, unrecognized expression:的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。