事件为什么触发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

i在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中常见的错误。您可以在Internet周围找到许多文章，以便为事件发射两次。您可以尝试这样的东西

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

肯定是JavaScript问题，因为如果您击中Google并搜索事件火灾两次您会看到Angular，jQuery和Backbone等都在某个地方发射两次甚至三次。因此，看来这背后是JavaScript。如果您使用Mozilla开发人员网络进行搜索，那么您可以看到专家也这样说。

Answer 4

这是JQXSLIDER插件中的错误。我通知了JQwidgets团队，并在其最新版本中进行了修复。