当另一个事件更改我的输入值时的事件监听器

Question

我有一个带有 datepicker 类的输入，如下所示：

<input class="ui-calendar hasDatepicker" type="text" name="date" id="date">

当这个输入值改变时，我需要覆盖所有场景。所以我有一个 .datepicker onSelect（当我通过 datepicker 日历选择日期时使用）和简单的 onChange（当我通过键盘输入日期时使用）事件：

$('#date').datepicker({
  onSelect: function() {
    console.log('datepicker onSelect event');
  }
});

和

$('#date').on('change', function() {
  console.log('onChange event');
});

现在的问题是我有单独的按钮：

<a href="#" onclick="setDate('date', '2018-12-05', '2018-12-05'); return false;">Set date</a>

这个 setDate 函数改变了我的 datepicker 输入的值。

如何在不将任何代码放入 setDate 函数本身的情况下捕获此 setDate 事件？我尝试在我的 datepicker 输入上添加监听器，但它只捕获我通过键盘输入的值。

Answer 1

首先，不要使用on* 事件属性，不显眼地附加您的事件处理程序。

其次，您应该通过datepicker()库使@​​987654322@更改日期，然后您将免费获得此行为：

<a href="#" class="set-date" date-foo="date" date-date1="2018-12-05" data-date2="2018-12-05">Set date</a>

$('.set-date').click(function(e) {
  e.preventDefault();
  $("#date").datepicker("setDate", $(this).data('date1'));
});

或者，您可以在输入上设置val() 并手动设置trigger() change 事件。

$('.set-date').click(function(e) {
  e.preventDefault();
  $('#date').val($(this).data('date1')).trigger('change');
});