Laravel模态框数据传递失败问题排查（疑因jQuery代码错误）

我仔细看了你的代码，问题主要出在jQuery的DOM操作逻辑和Blade模板的细节上，咱们一步步来修复：

1. 修正jQuery核心错误 #

你的jQuery代码有两个关键问题，直接导致数据无法传递：

• 没有把event.relatedTarget转为jQuery对象，直接调用.data()会触发错误
• 模态框的标题是<h5>标签，.val()是给表单元素赋值的方法，对普通文本标签应该用.text()

修改后的jQuery代码：

$('#show').on('show.bs.modal', function (event) { 
  // 将触发按钮转为jQuery对象，才能调用data()方法
  var button = $(event.relatedTarget);
  // 获取按钮上的自定义属性值
  var title = button.data('mytitle');
  var modal = $(this);
  // 用text()设置标题文本，替换掉错误的val()
  modal.find('.modal-title').text(title);
});

2. 修复Blade模板的潜在问题 #

• 页面里存在两个id="title"的元素（循环内的div和模态框的h5），ID在HTML中必须唯一，这会造成选择器混乱，建议修改循环内的ID：

  <div class="body" id="lesson-title"> {!! $lesson->title!!}</div>
  

• 自定义属性建议遵循HTML标准的data-*命名规范，虽然mytitle能工作，但写成data-title更规范：

  <button type="button" class="btn btn-primary" data-title="{{$lesson->title}}" data-target="#show" data-toggle="modal"> Start Lesson </button>
  

  对应的jQuery代码也要同步改成var title = button.data('title');

3. 确保jQuery加载顺序正确 #

要保证你的jQuery文件在Bootstrap JS之前加载，并且代码要在DOM完全加载后执行（包裹在$(document).ready()里）：

$(document).ready(function() {
  $('#show').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget);
    var title = button.data('title');
    var modal = $(this);
    modal.find('.modal-title').text(title);
  });
});

做完这些修改后，点击按钮打开模态框，标题应该就能正常显示对应的课程名称了。

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