jQuery UI日期选择器altField.change函数无法工作？

Question

有人能告诉我为什么使用jQuery UI日期选择器选定日期时，console.log行没有执行吗？

<script type="text/javascript">
    $(window).ready(function() {
        $(function() {
            $("#datepicker").datepicker({ altField: '#dateIntermediate'});
        });
        $('#dateIntermediate').change(function(){ 
            console.log("dateIntermediate changed");
        });
    });
</script>
<p>Date: <input id="datepicker" type="text"></p>
<input type="hidden" id="dateIntermediate" />

- ben

---

我认为由于它是一个隐藏字段，所以它不会被触发。DOM onchange 事件仅适用于以下元素：<input type="text">、<select>、<textarea>（来自 w3schools.com）。尝试将其更改为文本框进行测试。 - Marimuthu Madasamy

Answer 1

在这些情况下（通过脚本设置值），浏览器不会触发change事件，如果你想知道它何时发生，可以使用onSelect处理程序来处理日期选择器，例如：

$(function() {
  $("#datepicker").datepicker({ 
    altField: '#dateIntermediate',
    onSelect: function() { 
      alert('Current #dateIntermediate value: ' + $("#dateIntermediate").val());
    }
  });
});

您可以在这里测试。或者，您也可以以同样的方式触发当前已有的change处理程序：

$(function() {
  $("#datepicker").datepicker({ 
    altField: '#dateIntermediate',
    onSelect: function() { 
      $("#dateIntermediate").change();
    }
  });
  $('#dateIntermediate').change(function(){ 
    console.log("dateIntermediate changed");
  });
});​

您可以在这里测试

---

顺便提一下，您不需要在那里使用$(window).ready(function() { });包装器，它相当于$(document).ready(function() { });，已经由您的$(function() { });包装器处理。您当前的方法可行是因为$(anything).ready()都指向同一个位置，但没有必要使用多个包装器，因此只需删除外部的一个即可 :)

- Nick Craver

---

这种方法还不错，除非您使用键盘导航选择日期，然后从日期选择器字段切换。在这种情况下，altField 会保留您刚刚选择的日期，但是 altField 上的 change 事件不会被触发。有什么想法吗？ - Ifedi Okonkwo