Datepicker选择日期后模态框传递值变为undefined问题求助

场景与代码 #

HTML代码 #

<td>
    <a id="editSked" name="edit" data-toggle="modal" 
    data-target="#myModal" class="orange" href=""
    data-text="1,12342,Test User,ACCOUNTING,mtba,2023-09-09,09:00:00,12:00:00">
    <i class="ace-icon fa fa-calendar bigger-130"></i> Reschedule
    </a> 
</td>

jQuery模态框赋值代码 #

var button = $(event.relatedTarget);
console.log(button.data('text')); //display data text
var auex = button.data('text').split(",")[0];
var idno = button.data('text').split(",")[1];
var name = button.data('text').split(",")[2];
var dept = button.data('text').split(",")[3];
var essay = button.data('text').split(",")[4];
var schedule = button.data('text').split(",")[5];
var from = button.data('text').split(",")[6];
var to = button.data('text').split(",")[7];

var dSked = new Date(schedule);

var modal = $(this)
modal.find('.modal-body #qAuex').val(auex)
modal.find('.modal-body #qIdno').val(idno)
modal.find('.modal-body #qFnme').val(name)
modal.find('.modal-body #qDept').val(dept)
modal.find('.modal-body #qEssy').val(essay)
modal.find('.modal-body #qDate').datepicker('setDate',dSked)
modal.find('.modal-body #timepicker1').val(start)
modal.find('.modal-body #timepicker2').val(end)

问题现象 #

• 首次点击按钮打开模态框时，data-text值正常，可通过split分割赋值
• 一旦在模态框中选择datepicker的日期，后续操作时button.data('text')变为undefined，触发split方法报错
• 操作timepicker无此异常，直接用val(schedule)赋值日期也无法解决问题

原因分析 #

1. 重复ID导致选择器混乱：所有编辑按钮使用了同一个id="editSked"，DOM要求ID唯一，重复ID会让jQuery获取错误元素，进而取不到data-text
2. 事件触发逻辑冲突：datepicker的选择事件可能冒泡触发模态框的show.bs.modal事件，此时event.relatedTarget不再是原按钮，导致获取不到数据
3. jQuery Data缓存被意外修改：datepicker内部操作可能意外清空了按钮元素的jQuery数据缓存，导致data('text')失效

解决方案 #

1. 修复重复ID问题 #

将按钮的id="editSked"改为class，避免ID重复：

<td>
    <a class="editSked orange" name="edit" data-toggle="modal" 
    data-target="#myModal" href=""
    data-text="1,12342,Test User,ACCOUNTING,mtba,2023-09-09,09:00:00,12:00:00">
    <i class="ace-icon fa fa-calendar bigger-130"></i> Reschedule
    </a> 
</td>

2. 优化数据存储逻辑 #

在模态框初始化时，将按钮的data-text数据存储到模态框自身的data中，避免后续依赖event.relatedTarget：

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  // 将分割后的数据存入模态框的data缓存
  $(this).data('skedData', button.data('text').split(','));
  
  var skedData = $(this).data('skedData');
  var auex = skedData[0];
  var idno = skedData[1];
  var name = skedData[2];
  var dept = skedData[3];
  var essay = skedData[4];
  var schedule = skedData[5];
  var from = skedData[6];
  var to = skedData[7];

  var dSked = new Date(schedule);

  var modal = $(this);
  modal.find('.modal-body #qAuex').val(auex);
  modal.find('.modal-body #qIdno').val(idno);
  modal.find('.modal-body #qFnme').val(name);
  modal.find('.modal-body #qDept').val(dept);
  modal.find('.modal-body #qEssy').val(essay);
  modal.find('.modal-body #qDate').datepicker('setDate', dSked);
  modal.find('.modal-body #timepicker1').val(from); // 修正原代码变量名错误
  modal.find('.modal-body #timepicker2').val(to); // 修正原代码变量名错误
});

3. 隔离datepicker事件 #

初始化datepicker时添加配置，阻止事件冒泡，避免触发模态框额外事件：

$('#qDate').datepicker({
  autoclose: true,
  format: 'yyyy-mm-dd'
}).on('changeDate', function(e) {
  e.stopPropagation();
});

4. 备选方案：直接读取原生属性 #

如果jQuery Data缓存仍有问题，直接通过原生DOM方法获取data-text：

var textData = button[0].getAttribute('data-text').split(',');

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