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中测试你的Demo。我删除了重要的触发按钮。我发现问题出现在触发器中，因为你打了两次 $（'＃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中常见的Bug。你可以找到很多关于互联网的文章特别是因为事件被解雇两次。你可以试试这样的东西

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

这肯定是Javascript问题，因为如果你点击谷歌并搜索事件火两次，你会看到Angular，Jquery和骨干等都在某个地方发射事件两次甚至三次。所以，似乎这背后是javascript。当然，如果您使用Mozilla Developers Network进行搜索，那么您可以看到专家们也这样说过。

Answer 4

原来这是jqxSlider插件中的错误。我通知了jqwidgets团队这个问题，并在最新版本中修复了它。

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

4 个答案: