【问题标题】:Bootstrap datepicker unexpectedly fires change event inside another event handler引导日期选择器意外触发另一个事件处理程序中的更改事件
【发布时间】:2017-04-11 02:11:21
【问题描述】:

我注意到 Bootstrap 日期选择器触发了意外事件。它只发生在另一个函数/处理程序内部。

通常setDate 不应该触发事件,它不会!除非我将它包装到另一个函数/处理程序中。

试图了解差异并摆脱不必要的事件触发。

请帮忙。

//$('.set-date-button').click(function(event) {
  event.preventDefault();
  var startDate = '01/01/2017';
  $('.start .date').datepicker('setDate', startDate);
//}); When commented, change event doesn't fire, when uncommented - unexpected change event fires.

https://jsfiddle.net/xek22wpq/

使用changechangeDate 没有任何区别。

$('.set-date-button').click(function(event) {
  event.preventDefault();
  var startDate = '01/01/2017';
  $('.start .date').datepicker('setDate', startDate);
});

$(document).on('change', '.start .date', function() {
  alert('fired!');
});
<link href="https://rawgit.com/uxsolutions/bootstrap-datepicker/master/dist/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/uxsolutions/bootstrap-datepicker/master/dist/js/bootstrap-datepicker.min.js"></script>
<button class='set-date-button'>Set Date</button>
<div class='start'>
  <input class='date' placeholder='mm/dd/yyyy'>
</div>

【问题讨论】:

  • 请注意您链接了eonasdan-datetimepicker 文档,而在您的小提琴和sn-p 中您使用的是bootstrap-datepicker。第一个组件既没有 datepicker 也没有 setDate 方法。 fiddle 和 sn-p 都不起作用。请编辑您的问题,指定您正在使用的组件。
  • 链接错误,已修复。

标签: jquery twitter-bootstrap bootstrap-datepicker


【解决方案1】:

https://github.com/uxsolutions/bootstrap-datepicker/issues/575

我发现update方法不会触发changeDate,而是触发change。这就是我消除这种额外射击的方法:

$('.set-date-button').click(function(event) {
  event.preventDefault();
  var startDate = '01/01/2017';
  $('.start .date').datepicker('update', startDate);
});

$(document).on('changeDate', '.start .date', function() {
  alert('fired!');
});

https://jsfiddle.net/xek22wpq/10/

【讨论】:

    【解决方案2】:

    因为当您创建更改事件时,日期已经设置好了。如果你倒序它会触发更改事件:jsfiddle.net/xek22wpq/9

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-03-22
      • 2015-06-12
      • 2017-12-23
      • 1970-01-01
      • 1970-01-01
      • 2023-02-05
      • 1970-01-01
      相关资源
      最近更新 更多