JQuery Dialog弹窗二次打开时DatePicker自动聚焦且点击失效问题排查

• 弹窗关闭时未清理DatePicker实例与DOM绑定
  每次弹窗关闭后，#poDialog内的DOM被替换，但之前绑定的DatePicker实例未被销毁，新DOM插入后会触发重复绑定，导致实例冲突。在弹窗close回调中添加清理逻辑：

  close: function(event, ui) { 
      // 销毁弹窗内所有DatePicker实例
      $('.datePicker', this).datepicker('destroy');
      // 清空弹窗内容
      $(this).empty();
  } 
  

• DOM插入与弹窗打开的顺序问题
  当前先打开弹窗再插入HTML，可能导致浏览器自动聚焦输入框，触发focus事件时DOM未完全渲染。调整顺序为先插入内容再打开弹窗：

  success:function(result){
      $('#poDialog').html(result);
      $('#poDialog').dialog('open');
  }
  

• 避免DatePicker重复初始化
  全局事件委托会给每个新插入的.datePicker元素重复绑定DatePicker，添加标记避免重复初始化：

  $('body').on('focus',".datePicker:not(.has-datepicker)", function(){
      $(this).addClass('has-datepicker').datepicker({});
  });
  

• jQuery UI版本兼容性检查
  报错Cannot set properties of undefined (setting 'currentDay')常出现在重复初始化或DOM元素失效的场景，检查jQuery与jQuery UI版本是否兼容，尝试升级到稳定版本（如1.12.x系列）。

• 弹窗关闭时重置焦点状态
  弹窗关闭后焦点残留可能导致再次打开时自动聚焦输入框，在close回调中将焦点重置到触发按钮：

  close: function(event, ui) { 
      $('.datePicker', this).datepicker('destroy');
      $(this).empty();
      // 替换为你的弹窗触发按钮选择器
      $('#openPoBtn').focus();
  } 
  

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