模態框之Uncaught Error: Syntax error, unrecognized expression:

網頁源碼：

<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的text
        modal.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的text
        modal.find('#recipient-name').val(recipient)  
    })  
</script> 

將其中的

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