Bootstrap 使用 jquery 单击更新按钮时未显示模态

Question

我正在使用 jquery 使用 bootstrap 模态更新数据它不显示模态我不知道为什么

这是我的模态代码

<div id="updateModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>    

            <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter name" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="email" name="email" placeholder="Enter email" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="mob" name="mob" placeholder="Enter Mobile" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="city" name="city" placeholder="Enter City" />
                    </div>

                <a href="#" id="save" class="btn btn-success pull-right">Update</a>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>

这是 jquery 代码：

    $(document).ready(function(){
       $(document).on('click','a[data-role=update]',function(){
          var id = $(this).data(id);
           var name = $('#'+id).children('td[data-target=name]').text();
           var email = $('#'+id).children('td[data-target=email]').text();
           var mob = $('#'+id).children('td[data-target=mob]').text();
           var city = $('#'+id).children('td[data-target=city]').text();

           $('#name').val(name);
           $('#email').val(email);
           $('#mob').val(mob);
           $('#city').val(city);
           $('#updateModal').modal('toggle');
       });
    });

这是要更新的人员列表的代码：

<div class="table">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Sr. No.</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>City</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            <?php while($row = mysqli_fetch_array($query)): $count++;?>
            <tr id="<?php echo $row['id'];?>">
                <td><?php echo $count;?></td>
                <td data-target="name"><?php echo $row['name'];?></td>
                <td data-target="email"><?php echo $row['email'];?></td>
                <td data-target="mob"><?php echo $row['mob'];?></td>
                <td data-target="city"><?php echo $row['city'];?></td>
                <td><a href="#" class="btn btn-success btn-sm" data-role="update" data-id="<?php echo $row['id'];?>">Update</a></td>
            </tr>
            <?php endwhile;?>
        </tbody>

    </table>
</div>

写到这里，我希望模式应该弹出并在输入字段中显示信息，但是当我单击更新按钮时，模式不会弹出。

如有任何帮助，我们将不胜感激。

Answer 1

您有误 script.You 刚刚遗漏了一个报价

请替换下面这行

var id = $(this).data('id');

Answer 2

在jQuery代码中，

var id = $(this).attr('data-id');
console.log(id); // test the data-id in console

Answer 3

将您的代码替换为波纹管 code.you 在您的 link 中遗漏了以下用于编辑的属性 data-toggle="model" data-target="#updateModal"

">更新

Bootstrap 使用 jquery 单击更新按钮时未显示模态

Bootstrap modal is not showing while clicking on update button using jquery

jquery

modal-dialog