Bootstrap 4模态变化内容不起作用

问题描述 投票:-1回答:1

我有一个小问题,我无法获得一个模态来从HTML表中读取数据并将其输入到Bootstrap 4模态中。我尝试了多种方法,如下面的代码片段所示。

这只是我的学习,因为我需要能够使用ASP.Net做到这一点,并从数据库中填充一个表,然后将数据传递到Modal中,但首先需要获得基本的Modal工作。有人可以帮忙弄清楚为什么它不起作用。

HTML:

@{
    ViewData["Title"] = "PlayTest";
}

@model ViewModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="~/css/site.css" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" id="bootstrap-css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>@ViewData["Title"]</h1>
        <br />
        <br />

        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Gender</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="name">John</td>
                    <td class="age">45</td>
                    <td>Male</td>
                    <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" data-name="John">View</button></td>
                </tr>
                <tr>
                    <td class="name">Samantha</td>
                    <td class="age">32</td>
                    <td>Female</td>
                    <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View</button></td>
                </tr>
            </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Name</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="ageMessage">Age</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

JS:

<script type="text/javascript">
    $(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var _name = button.data('name');

            var row = button.parents('tr');
            //var name = row.find('.name').text();
            var age = row.find('.age').text();

            $(this).find('.modal-title').val(_name);
            //$(this).find('.modal-title').val(name);
            $(this).find('.ageMessage').val('Your age is: ' + age + '!');
        })
    })
</script>

它仍然打开一个模态,除了硬编码的“名称”和“年龄”以外,什么都没有显示,没有我期望看到的表中的值。

javascript jquery html bootstrap-4 bootstrap-modal
1个回答
0
投票

[我注意到您的JavaScript使用myModel作为ID,但是您的模式的ID为myModal

由于事件侦听器未侦听您的模态,因此不会调用您的JQuery函数。

代替$('#myModel')使用此-> $('#myModal')

© www.soinside.com 2019 - 2024. All rights reserved.