javascript - 时间选择器插件正在停止我的 JQuery 脚本

Question

我需要修复我的 jQuery 代码，该代码在安装时间选择器插件之前工作正常，现在输入字段的值正在按时间选择器更改，因此它不会列出到事件中:

HTML:

<input 
    name="pickup" 
    type="text" 
    class="m-wrap input-smaller transedit clockface_2" 
    value="" 
    readonly />

<button class="btn clockface_2_toggle" type="button" ></button>

jQuery:

$('.transedit').on('change keyup', function() 
{
    alert('time changeded');
});

 $('.clockface_2').clockface({
        format: 'HH:mm',
        trigger: 'manual'
    });

    $('.clockface_2_toggle').click(function (e) {
        e.stopPropagation();
        $(this).closest('tr').find($('.clockface_2')).clockface('toggle');
    });

Answer 1

在这里查看他们的插件源代码:https://github.com/vitalets/clockface/blob/master/js/clockface.js 。

您的事件不起作用的原因是它们将输入值设置为 val()但不触发change事件。 val()其本身不会触发更改事件。

代码标记为<<<< HERE下面。

    /*
    Click cell handler.
    Stores hour/minute and highlights.
    On second click deselect value
    */
    click: function(e) {
      var $target = $(e.target),
          value = $target.hasClass('active') ? null : $target.text();
      if($target.hasClass('inner')) {
        this.setHour(value);
      } else {
        this.setMinute(value);
      }

      //update value in input
      if(!this.isInline) {
        this.$element.val(this.getTime());          // <<<<<<<<<<<<<<< HERE
      }          

      //trigger pick event
      this.$element.triggerHandler('pick.clockface', this.getTime(true));  
    },

    /*
    Click handler on ampm link
    */
    clickAmPm: function(e) {
      e.preventDefault();
      //toggle am/pm
      this.setAmPm(this.ampm === 'am' ? 'pm' : 'am');

      //update value in input
      if(!this.isInline && !this.is24) {
        this.$element.val(this.getTime());          // <<<<<<<<<<<<<<< HERE
      }    

      //trigger pick event
      this.$element.triggerHandler('pick.clockface', this.getTime(true));                  
    },

解决方案是修复插件，使其在设置输入值后触发 change 事件:

    /*
    Click cell handler.
    Stores hour/minute and highlights.
    On second click deselect value
    */
    click: function(e) {
      var $target = $(e.target),
          value = $target.hasClass('active') ? null : $target.text();
      if($target.hasClass('inner')) {
        this.setHour(value);
      } else {
        this.setMinute(value);
      }

      //update value in input
      if(!this.isInline) {
        this.$element.val(this.getTime()).change();      // <<<<<< HERE
      }          

      //trigger pick event
      this.$element.triggerHandler('pick.clockface', this.getTime(true));  
    },

    /*
    Click handler on ampm link
    */
    clickAmPm: function(e) {
      e.preventDefault();
      //toggle am/pm
      this.setAmPm(this.ampm === 'am' ? 'pm' : 'am');

      //update value in input
      if(!this.isInline && !this.is24) {
        this.$element.val(this.getTime()).change();      // <<<<<< HERE;
      }    

      //trigger pick event
      this.$element.triggerHandler('pick.clockface', this.getTime(true));                  
    },

我认为更简单的选择可能是听他们的定制pick.clockface相反，您的代码中的事件，但您可能想使用此选项，因为我从未使用过该插件:

例如

$('.transedit').on('pick.clockface', function() 
{
    alert('time changeded');
});