【发布时间】：2019-04-08 10:47:58
【问题描述】：
当显示引导模式时，可以使用诸如
之类的代码轻松检索相关数据$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
}
关闭 bootstrap modal时是否可以这样？
特别是当被特定按钮（即确认按钮，而不是任何一个取消按钮）关闭时？ relatedTarget 似乎无法从模式内的任何 buttons 或 hidden.bs.modal 事件中获得。
在以下操场中，data-id 属性值应显示在删除按钮下方，当以类似方式单击 modal 的“是”时，data-id 将显示模态体：
$(document).ready(function () {
$('#deleteModal').on('show.bs.modal', function (e) {
$('#testOutput,#testOutput2').text('');
var id = $(e.relatedTarget).data('id');
$('#deleteId').text(id || 'id retrieval failed');
});
$('#deleteModal').on('hidden.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id'); //does not work
$('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
});
$('#confirmDeleteBtn').click(function (e) {
var id = $(e.relatedTarget).data('id'); //does not work
//var id = $(this).closest('.modal').data('id'); //doesnt work neither
$('#testOutput').text(id || '"btn.close .modal" id retrieval failed');
});
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="col offset-3">
<div class="d-flex">
<button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="42">delete record 1</button>
<button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="123">delete record 2</button>
</div>
<h5 class="mt-4 text-danger" id="testOutput"></h5>
<h5 class="text-danger" id="testOutput2"></h5>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalTitle">Confirm delete</h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Delete record <span class="font-weight-bold text-danger" id='deleteId'></span>?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" id="confirmDeleteBtn" data-dismiss="modal">Yes</button>
<button class="btn btn-outline-secondary" id="cancelDeleteBtn"type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>请注意打开button的id不是恒定的，即有很多删除buttons能够打开单个对话框。
【问题讨论】：
-
@freedomn-m 必须承认可能会被视为模棱两可，但是从 html 元素获取属性值将是微不足道的，所以我相信大多数人（如果不是所有人）都会理解将其理解为 indetended。无论如何，你能建议一个明确的标题吗？
-
@freedomn-m 啊，这里的主要困惑是关于 Bootstrap 的modal data-passing pattern。因此，我希望“传递数据->打开->关闭->获取数据”而不是“传递数据->打开->获取数据”，但不确定如何将其包含在标题中。无论如何它都与关闭按钮无关（好吧，除了关闭时，我需要之前传递的数据）。
标签： javascript jquery twitter-bootstrap bootstrap-4 bootstrap-modal