jQuery 模态弹出窗口不显示元素值

Question

在 ASP.NET Core 3.1 Razor 页面中打开 Bootstrap 4.0 模式后，jQuery shown.bs.modal 事件未在模式中显示元素值。但是，将分配的值记录到控制台会正确显示它。而使用 show.bs.modal 仍然无效。模式是否过早弹出？有什么问题吗？

HTML 模态：

<div id="eventModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span id="eventTitle"></span></h4>
            </div>
            <div class="modal-body">
                <p id="pDetails"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

jQuery:

$('#eventModal').modal('show').on('shown.bs.modal', function () {
    $('#eventModal #eventTitle').val("Sample Title");
    console.log($('#eventModal #eventTitle').val()); // This shows correctly.
}

Answer 1

使用以下方法：

.text() - 设置或returns所选元素的文本内容
.html() - 设置或 returns 所选元素的内容（例如：包括 HTML 标记）
.val() - 设置或returns 表单字段的值

因此，您可以使用：

$('#eventModal').modal('show').on('shown.bs.modal', function () {
    $('#eventTitle').text("Sample Title");        
}

jQuery 模态弹出窗口不显示元素值

jQuery modal popup not showing element value

jquery

modal-dialog

bootstrap-modal