Why do events trigger jqxSlider change events twice?

Question

I have a page with a jqxSlider on it, and that slider has an onChange event attached to it. There are a couple of buttons that can cause the value of the slider to change. For some reason, triggering the change of the slider from a click event of a button is causing the change to fire twice. I have setup a fiddle demo to demonstrate what I am seeing.

Can someone tell me why the event is firing twice?

Fiddle Demo

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

This turned out to be bug in the jqxSlider plugin. I notified the jqwidgets team of the issue, and it was fixed in their latest release.

Answer 2

I hope this will help you:

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

I test your Demo In JSFIDDLE. I delete your trigger button that counts. I figure it out that the problem is in the trigger because you call twice the $('#jqxSlider') so it count twice. I try to delete the code and modify. PLease check if this solve your problem.

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 4

This is a common Bug in Javascript. you can find many articles around internet specially on SO for event being fired twice. You can try something like this

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

And it's definitely Javascript problem because if you hit google and search for event fire twice you will see that Angular, Jquery and backbone etc all are somewhere firing events twice or even thrice. So, it's seems that it's javascript behind this. And off course if you search this with Mozilla Developers Network then you can see experts have also said so.