Question

我有一个带有两个日期选择器文本框（开始和结束日期）和一个提交按钮（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分别将datepickers和click事件分配给文本框和按钮：

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位于体内“包装”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，因为这不会导致问题。当我调用'display（data）'函数时，Datepicker只会中断。如果我省略该函数，程序console.log的数据正常，而datepicker仍然可用。

然而，第二个我尝试将div添加到'#wrapper'，datepicker会中断。文本框仍然具有“.hasdatepicker”类。我已经尝试过datepicker（'destroy'）并在重新分配之前删除'.hasdatepicker'类，但这些都不会解决我的问题。我还确保正确设置z索引，以便datepicker有更高的索引。我把div放在一边只是为了确保没有一些奇怪的z-index-not-working问题，但日历实际上没有显示。有什么建议吗？

Answer 1

根据我的评论：

发生的事情是你使用.datepicker将日期选择器附加到dom元素，它将事件监听器附加到输入字段（在click事件上触发自身）。

使用行

时

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

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

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

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

为什么在向DOM添加不相关的div后，JQuery UI Datepicker停止工作？

1 个答案: