Jquery 使用自定义数据id加载模式

我的一个网站有问题

我有一些类似以下的列表链接：

<ul>
  <li><a data-toggle="modal" data-target="#myModal" data-id="10">Room 10</a>
  <li><a data-toggle="modal" data-target="#myModal" data-id="20">Room 20</a>
</ul>

我的问题是，如何将数据库中的房间信息加载到

#myModal

窗口中

逐步：

我点击编辑室链接

模态从数据库加载信息

我可以更改信息

我保存表格

模式关闭

---

非常感谢。

假设模态中的元素ID为

roomNumber

，例如：

<p>Your room number is: <span id="roomNumber"></span>.</p>

可能有一种方法可以简化这一过程，即在show函数中抓住click目标并在那里获取id，但目前我还没有意识到这一点

---

更新：找到它：

$('#myModal').on('show.bs.modal', function (e) {
    var myRoomNumber = $(e.relatedTarget).attr('data-id');
    $(this).find('.roomNumber').text(myRoomNumber);
});

您的Html如下所示：

<button class="btn btn-success btn-sm button" data-id="<?php echo $BDD['id']; ?>" data-toggle="modal" data-target="#MyModal">
click me
</button>

---

我遇到了相同的问题，即获取模态的单击元素的数据id

这对我很有用

$('#MyModal').modal().on('shown.bs.modal', function (e) {

  var myDataId= $(e.relatedTarget).attr('data-id'); 

 });

希望这有帮助。
模态内容的HTML在哪里？@isherwood我已经更新了代码。谢谢。哦，对不起，我完全误解了这个问题。
$( ".button").on("click", function(event){
/* if you want to use the same modal, you must unbind() actions because bootstrap 
   remember olders actions on Modal element */

$( "#MyModal" ).unbind();
var btn = $(this);
var id = $(this).data("id"); /* "data-id" attribute in html */
$.ajax({
 type: 'POST',
 url: content_direct_delivery_in_html,
 data: { id: id },
success: function(html) {
 $('#MyModal').modal().on('shown.bs.modal', function (e) {
  $("#MyModal_body").html(html);
 });
}

<button class="btn btn-success btn-sm button" data-id="<?php echo $BDD['id']; ?>" data-toggle="modal" data-target="#MyModal">
click me
</button>

$('#MyModal').modal().on('shown.bs.modal', function (e) {

  var myDataId= $(e.relatedTarget).attr('data-id'); 

 });