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

Question

我有一个带有日期选择器 class 的输入，看起来像这样：

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

我需要涵盖更改此输入值时的所有场景。所以我有一个 .datepicker onSelect（当我通过 datepicker 日历 select 日期时使用）和简单的 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 函数更改了我的日期选择器输入的值。

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

Answer 1

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

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

<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');
});

Event listener when another event changes my input value