Плагин выбора времени останавливает мой сценарий 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));     
    }, 

Решения исправить плагин так, что это вызывает Смените событие после установки входного значения:

/* 
    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 в вашем коде вместо этого, но вы можете играть с этой опцией, поскольку я никогда не использовал этот плагин:

eg

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

Answer 2

Изменение : к ; в конце alert functi на:

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

       alert('time changeded'); 
      });