Question

我试图通过点击HTML标记来加载我的模态，如下所示：

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
    <table class="usersTables" id="userTable">
        <thead>
            <tr>
                <th scope="col"><?= $this->Paginator->sort('name') ?></th>
                <th scope="col" class="actions"><?= __('Actions') ?></th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($users as $user): ?>
            <tr>
                <td><?= h($user->name) ?></td>                  
                <td class="actions">
                    <a href="#" id="managephoto">Manage Photo</a>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(function () {
         $('#managephoto').click(function () {
              $('#myModal').modal('show');
         });
    });
</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <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">&times;</span>
                 </button>
                 <h4 class="modal-title" id="myModalLabel">Photo</h4>
            </div>
            <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                 <button id="savebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>

但是我目前收到以下错误：

Uncaught TypeError: $(...).modal is not a function

此错误仅出现在表格的第一个条目中，其他数据条目的所有其他相同链接均未显示（我相信其他链接根本不起作用，因为它们也应该提供相同的误差）。

我也会被直接发回到顶部，但我认为，鉴于HTML标记有href="#"，我认为这是预期的。

我尝试过以下方法：

将$(function () {替换为$(document).ready(function () {
将$(function () {替换为$(window).load(function () {

Answer 1

 <script type="text/javascript">
  $('document').ready(function () {
    $('#managephoto').click(function () {
            $('#myModal').modal('show');
    });
  });
</script>

尝试一下，它会起作用。

TypeError：$（...）。modal不是函数

1 个答案: