Search code examples
javascriptjqueryjquery-dropkick

jquery event been called twice - dropkick.js

So I have this problem where I have a dropdown and then I create it using dropkick.js. (I am just learning dropkick.js so I am now thinking that I misunderstood something.)

The Problem

When I bind an on change event like so

$('.pizza_size').on('change', 'select[name=pizza_size]', function() {
    alert(this.value);
});

The alert is called twice.

Fiddle here

My initial problem was that the select dropdown was changed dynamically, so the $(".default").dropkick(); didn't apply anymore, so I created this dynamic selector above. (If there is a better way to bind the call dynamically than this please do tell! :D)

Helpful information: (based on some of my debugging)

  • The initial html/script was like this fiddle here where it created two dropdowns, (though they dont seem to be related)The one I create with code <select>...</select> and the one dropkick.js creates with the class=dk_container dk_theme_default class. So I commented this html to avoid this (in first fiddle), but it still seems to exist 2 select dropdowns!
Solution

  • I think I found the issue :

    Inside your dropkick.js plugin you have select triggered twice. Search for these lines inside your plugin

    $select.trigger('change');
$select.val(value).trigger('change');

    Comment the first line here

    $select.trigger('change'); // comment this line in your dropkick.js file

    and try. "The alert is called twice." this will be fixed.