javascript - イベントがjqxSlider変更イベントを2回トリガーするのはなぜですか?

Question

jqxSlider を含むページがあり、そのスライダーにはonChangeイベントが関連付けられています。スライダーの値を変更できるボタンがいくつかあります。何らかの理由で、ボタンのクリック イベントからスライダーの変更をトリガーすると、変更が 2 回発生します。私が見ているものを示すために、フィドルのデモをセットアップしました。

イベントが 2 回発生する理由を教えてもらえますか?

フィドルのデモ

HTML

<div id="jqxSlider"></div>
<div>
    <input id='theinput' />
    <button id='thebutton' type='button'>Change</button>
</div>

JavaScript

$('#jqxSlider').jqxSlider({ min: 1, max: 30, ticksFrequency: 1, value: 1, step: 1, mode: 'fixed' });

$('#jqxSlider').on('change', function () {
   console.log('change triggered'); 
});

$('#thebutton').on('click', function () {
    $("#jqxSlider").val(parseInt($("#theinput").val(), 10));   
});

Answer 1

これは、jqxSlider プラグインのバグであることが判明しました。jqwidgets チームにこの問題を通知したところ、最新のリリースで修正されました。

Answer 2

これがお役に立てば幸いです：

var triggers = 0;

$('#jqxSlider').jqxSlider({ min: 1, max: 30, ticksFrequency: 1, value: 1, step: 1, mode:  'fixed' });

$('#jqxSlider').on('change', function (event,data) {
  console.log(data);
  if(data)
  {
     triggers++;
  }

  $('#thelabel').text(triggers);
 });

$('#thebutton').on('click', function () {
 //$("#jqxSlider").val(parseInt($("#theinput").val(), 10));   
    $("#jqxSlider").trigger('change',parseInt($("#theinput").val(), 10));   
});

Answer 3

JSFIDDLE でデモをテストします。重要なトリガーボタンを削除します。$('#jqxSlider')を2回呼び出して2回カウントするため、トリガーに問題があることが わかりました。コードを削除して変更しようとしています。これで問題が解決するかどうかを確認してください。

var triggers = 0;

$('#jqxSlider').jqxSlider({ min: 1, max: 30, ticksFrequency: 1, value: 1, step: 1, mode: 'fixed' });


 $('#thebutton').on('click', function () {
triggers++;
  $('#thelabel').text(triggers);
if($("#theinput").val() <= 30){
$("#jqxSlider").val(parseInt($("#theinput").val(), 10));
    }
});