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

【问题标题】：Bootstrap 4 Modal Varying Content not workingBootstrap 4模态变化内容不起作用
【发布时间】：2020-03-03 01:38:22
【问题描述】：

我遇到了一个小问题，我无法从 HTML 表中读取数据并将其输入到 Bootstrap 4 模式中。我尝试了多种方法，如下面的代码 sn-ps 所示。

这只是我的学习，因为我需要能够使用 ASP.Net 来完成它，并从数据库中填充一个表格，将数据传递到模态，但首先需要让一个基本的模态工作。有人可以帮忙弄清楚为什么这不起作用。

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】：

我注意到您的 JavaScript 使用 myModel 作为 ID，但您的模态框的 ID 为 myModal。

您的 JQuery 函数将不会被调用，因为事件侦听器未在侦听您的模式。

用这个代替$('#myModel') -> $('#myModal')?

【讨论】：

哎呀我的错误@odgers.chris，我已经编辑了它以备将来的答案。但是由于某种原因，该更改仍然没有解决问题。