javascript - 为什么事件会触发 jqxSlider 两次更改事件？

Question

我有一个带有 jqxSlider 的页面，并且该滑块onChange附加了一个事件。有几个按钮可以导致滑块的值发生变化。出于某种原因，从按钮的单击事件触发滑块的更改会导致更改触发两次。我已经设置了一个小提琴演示来演示我所看到的。

有人能告诉我为什么事件会触发两次吗？

小提琴演示

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

我希望这能帮到您：

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 2

我在 JSFIDDLE 中测试你的演示。我删除了你重要的触发按钮。我发现问题出在触发器中，因为您调用了两次 $('#jqxSlider')所以它计数了两次。我尝试删除代码并修改。请检查这是否能解决您的问题。

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

Answer 3

这是 Javascript 中的常见错误。你可以在互联网上找到很多关于 SO 的文章，特别是关于事件被触发两次。你可以试试这样的

 $(document).on('click', '#jqxSlider', function(e)
 {
       alert('Hellow world');
       e.stopPropagation();
       return false;
 });

这绝对是 Javascript 问题，因为如果您点击 google 并搜索event fire 两次，您会看到 Angular、Jquery 和骨干网等都在某个地方触发了两次甚至三次事件。所以，这似乎是它背后的javascript。当然，如果您使用 Mozilla Developers Network 搜索此内容，那么您会看到专家也这么说。

Answer 4

这原来是 jqxSlider 插件中的错误。我将此问题通知了 jqwidgets 团队，并且在他们的最新版本中已修复。