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

解决方法是修复插件，以便在设置输入值后触发更改事件：

    /*
    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事件，但您可能想要使用此选项，因为我从未使用过该插件：

e.g。

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

Answer 2

在:功能结束时将;更改为alert：

$('.transedit').on('change keyup', function() {

                alert('time changeded');
            });

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

2 个答案: