jQuery模态弹出窗口未显示元素值
在ASP.NET Core 3.1剃须刀页面中打开Bootstrap 4.0模态后，JQuery show.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">×</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.
}
After opening a Bootstrap 4.0 modal in an ASP.NET Core 3.1 Razor page, the jQuery shown.bs.modal event is not showing the element value in the modal. But, logging the assigned value to the console shows it correctly. And using show.bs.modal instead still doesn't work. Is the modal popping up prematurely? What could be wrong?
HTML Modal:
<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">×</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.
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用以下方法：
.text（）- 设置或返回所选元素的文本内容.html（）- 设置或返回所选元素的内容（示例：包括：包括： html markup）.val（）- 设置或返回表单字段的值，因此您可以使用：
Using the following methods:
.text()- Sets or returns the text content of selected elements.html()- Sets or returns the content of selected elements (example : including HTML markup).val()- Sets or returns the value of form fieldsSo, you can use :