Bootstrap 2.3.2 Modal结合jQuery 1.7.1如何获取点击元素的data属性或ID

我之前也踩过老版本Bootstrap+jQuery组合的坑，给你两个可靠的解决方案：

方案一：利用Bootstrap模态框的show事件（推荐，保留原生语义） #

Bootstrap 2.3.2的模态框在显示前会触发show事件，并且可以通过event.relatedTarget拿到触发它的元素。具体操作如下：

1. 确保模态框有内容展示容器 #

<div id="my_modal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>会议室详情</h3>
  </div>
  <div class="modal-body">
    <p>会议室ID：<span id="room-id"></span></p>
    <p>会议室名称：<span id="room-name"></span></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">关闭</button>
  </div>
</div>

2. 绑定事件监听代码 #

$(document).ready(function() {
  // 监听模态框的show事件
  $('#my_modal').on('show', function(event) {
    // 获取触发模态框的.room元素
    var $trigger = $(event.relatedTarget);
    // 提取自定义属性值
    var roomId = $trigger.data('rm-id');
    var roomName = $trigger.text().trim(); // 提取显示的会议室名称

    // 将数据填充到模态框中
    $('#room-id').text(roomId);
    $('#room-name').text(roomName);
  });
});

这个方案不用修改你原来的.room元素代码，保留了Bootstrap原生的data-toggle和data-target属性，语义更清晰。

方案二：手动绑定点击事件（兼容性更强，支持动态元素） #

如果event.relatedTarget在你的环境下不生效，或者需要处理动态生成的.room元素，可以用这个方法：

1. 修改.room元素（移除原生触发属性） #

把原来的data-toggle="modal"去掉，避免和自定义事件冲突：

<div class="room" id="RM1" href="#my_modal" data-target="#my_modal" data-rm-id="RM1">Room RM1<i class="far fa-map iconMap"></i></div>

2. 添加自定义点击事件监听 #

$(document).ready(function() {
  // 用事件委托绑定，支持动态生成的.room元素
  $(document).on('click', '.room', function(e) {
    e.preventDefault(); // 阻止默认的href跳转行为
    var $this = $(this);
    // 提取数据
    var roomId = $this.data('rm-id');
    var roomName = $this.text().trim();

    // 填充模态框内容
    $('#room-id').text(roomId);
    $('#room-name').text(roomName);

    // 手动触发模态框显示
    $('#my_modal').modal('show');
  });
});

这个方案完全由你控制触发流程，不会受Bootstrap原生事件的限制，适合复杂场景或者动态生成元素的情况。

小提示 #

• 因为你用的是jQuery 1.7.1，记得用.on()方法绑定事件（它是1.7版本引入的，替代了之前的.bind()、.live()）。
• 如果需要展示更多内容，比如会议室位置、设备信息，只需要在.room元素上添加对应的data-*属性（比如data-rm-location="3楼A区"），然后用$this.data('rm-location')提取即可。

内容的提问来源于stack exchange，提问作者Dimitrios