jQuery与Bootstrap3.3.7的show.bs.modal事件在Safari/Firefox失效求助

这个问题我之前踩过坑！核心原因是Firefox和Safari对全局变量的处理更严格，而Chrome在非严格模式下会默认把event对象挂载到全局，所以你的代码在Chrome能正常运行，但其他浏览器直接报错阻塞了逻辑。

问题根源 #

你当前的事件处理函数没有显式接收event参数：

.on('show.bs.modal', function(){ 
  var getIdFromRow = $(event.target).data('id');
  // ...
})

在Firefox/Safari中，未声明的event会直接抛出ReferenceError，导致整个事件处理函数执行失败，自然拿不到data-id的值。

正确解决方案 #

1. 显式传入event参数 #

这是标准的事件处理写法，所有浏览器都支持：

$(function(){ 
  $('#bookModal').modal({ 
    keyboard: true, 
    backdrop: "static", 
    show:false, 
  }).on('show.bs.modal', function(event){ 
    // 显式接收event参数，避免全局变量依赖
    var triggerElement = $(event.relatedTarget); 
    var getIdFromRow = triggerElement.data('id'); 
    $(this).find('#orderDetails').html('<b> Order Id selected: ' + getIdFromRow + '</b>');
  });
});

2. 用relatedTarget替代target #

Bootstrap模态框的show.bs.modal事件专门提供了relatedTarget属性，它精准指向触发模态框打开的那个元素（比如你的按钮），比event.target更可靠——因为target可能是模态框内部的DOM元素，不一定能拿到你需要的data-id。

额外检查点 #

• 确保触发模态框的元素（比如按钮）确实带有data-id属性，格式正确（例如<button data-id="123" data-toggle="modal" data-target="#bookModal">打开模态框</button>）
• 检查代码语法完整性（比如原代码里的html($('<b>...没有闭合标签，可能导致渲染异常）

这样修改后，Firefox、Safari和Chrome都能正常触发事件并获取data-id了！

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