为啥在我将不相关的 div 添加到 DOM 后，JQuery UI Datepicker 停止工作？

Posted 2023-02-23

【中文标题】为啥在我将不相关的 div 添加到 DOM 后，JQuery UI Datepicker 停止工作？

【英文标题】：Why does JQuery UI Datepicker stop working after I add an unrelated div to the DOM?为什么在我将不相关的 div 添加到 DOM 后，JQuery UI Datepicker 停止工作？

【发布时间】：2015-01-18 14:23:00

【问题描述】：

我有一个带有两个日期选择器文本框（开始日期和结束日期）和一个提交按钮（type="button"）的表单。 html 看起来像这样：

 <div class="subForm">
  <h3>
    Input start/end dates and station ID or lat/lon location to get point surge
    in the desired time frame:
  </h3>

  <br>
  <br>

  <form>
    <span>
      Start Date:
      <br>
      <input id="sdate" type="text">
    </span>

    <span>
      End Date:
      <br>
      <input id="edate" type="text">
    </span>

    <span>
      Station ID:
      <br>
      <select id="stns"></select>
    </span>

    <span>
      <br>
      <input id="submit" type="button" value="Get Surge"/>
    </span>
  </form>
</div>

我使用以下 jQuery 分别为文本框和按钮分配日期选择器和单击事件：

window.onload = $(function() 
  $('#submit').click(function() 
    getArchive();
  );

  // Start/end datepickers
  window.sDateStr = '';
  window.eDateStr = '';
  $('#sdate').datepicker(changeMonth:true,
                          changeYear:true,
                          yearRange:"2002:2020",
                        );
  $('#edate').datepicker(changeMonth:true,
                          changeYear:true,
                          yearRange:"2002:2020",
                        );

  $('.ui-datepicker').css('z-index',9000);
);

“subForm”div 位于主体中的“wrapper”div 内部。当用户单击“Get Surge”时，表单使用 javascript 获取相关信息，然后将 div 附加到包装器（在提交表单下），如下所示：

function display(data) 
  $('#wrapper').html($('#wrapper').html() + '<pre id="pointdata">'+data['ss']+'</pre>');
  $('#pointdata').css('margin-top':'-6%',
                       'width':'90%',
                       'height':'600px',
                       'margin-left':'5%',
                       'overflow':'scroll',
                       'word-wrap':'break-word',
                       'z-index':'0');

此时，包含所有数据的表格加载得很好，但是文本框中的日期消失了，当我尝试重新输入新日期时，没有弹出日历。

我省略了抓取和解析数据的 Javascript，因为这不会导致问题。只有当我调用“显示（数据）”函数时，日期选择器才会中断。如果我省略该功能，程序 console.log 的数据正常，并且 datepicker 仍然可用。

但是，当我尝试将 div 附加到“#wrapper”时，日期选择器会中断。文本框仍然有类“.hasdatepicker”。我已经尝试过 datepicker('destroy') 并在重新分配之前删除了 '.hasdatepicker' 类，但这些都不能解决我的问题。我还确保正确设置 z-indexes，以便日期选择器具有更高的 z-indexes。我将 div 移到一边只是为了确保没有一些奇怪的 z-index-not-working 问题，但日历实际上没有显示。有什么建议吗？

【问题讨论】：

使用$('#wrapper').append(... 而不是$('#wrapper').html($('#wrapper').html() + ...

是的……那行得通。不知道为什么我没有这样做。想回答问题并获得积分吗？

【参考方案1】：

根据我的评论：

发生的情况是，您使用 .datepicker 将日期选择器附加到 dom 元素，该 .datepicker 将事件侦听器附加到输入字段（以触发点击事件）。

使用线路时

$('#wrapper').html($('#wrapper').html() + '<pre id="pointdata">'+data['ss']+'</pre>');

您实际上是在删除#wrapper 的内容并将其替换为自身，这样做将删除所有侦听器，这也是在 jquery 中使用事件委托的常见原因（尽管我认为您的 datepicker 库不支持它）

简单的解决方案是将新内容附加到#wrapper，与.html() 的功能相同，但它保留了侦听器：

$('#wrapper').append('<pre id="pointdata">'+data['ss']+'</pre>');