Remove binded events if element is disabled after initialization. Fix #115

Author: lcdsantos

public/jquery.selectric.js

@@ -136,12 +136,12 @@
        * @param  {string} f - String to be formated
        * @return {string}     String formated
        */
-      format: function (f) {
+      format: function(f) {
         var a = arguments; // store outer arguments
         return ('' + f) // force format specifier to String
           .replace( // replace tokens in format specifier
             /\{(?:(\d+)|(\w+))\}/g, // match {token} references
-            function (
+            function(
               s, // the matched string (ignored)
               i, // an argument index
               p // a property name
@@ -266,11 +266,11 @@
         outerWrapper : outerWrapper
       };
 
-      if (_this.options.nativeOnMobile && _this.utils.isMobile()) {
+      if ( _this.options.nativeOnMobile && _this.utils.isMobile() ) {
         _this.elements.input = undefined;
         hideSelectWrapper.addClass(_this.classes.prefix + '-is-native');
 
-        _this.$element.on('change', function () {
+        _this.$element.on('change', function() {
           _this.refresh();
         });
       }
@@ -310,6 +310,8 @@
         _this.elements.outerWrapper.width(originalWidth);
       }
 
+      _this.unbindEvents();
+
       if ( !_this.$element.prop('disabled') ) {
         _this.state.enabled = true;
 
@@ -556,15 +558,20 @@
       );
     },
 
-    /** Bind events on the elements */
-    bindEvents: function() {
+    /** Remove events on the elements */
+    unbindEvents: function() {
       var _this = this;
 
       _this.elements.wrapper
         .add(_this.$element)
         .add(_this.elements.outerWrapper)
         .add(_this.elements.input)
         .off(eventNamespaceSuffix);
+    },
+
+    /** Bind events on the elements */
+    bindEvents: function() {
+      var _this = this;
 
       _this.elements.outerWrapper.on('mouseenter' + eventNamespaceSuffix + ' mouseleave' + eventNamespaceSuffix, function(e) {
         $(this).toggleClass(_this.classes.hover, e.type === 'mouseenter');

public/jquery.selectric.min.js

@@ -119,12 +119,12 @@
        * @param  {string} f - String to be formated
        * @return {string}     String formated
        */
-      format: function (f) {
+      format: function(f) {
         var a = arguments; // store outer arguments
         return ('' + f) // force format specifier to String
           .replace( // replace tokens in format specifier
             /\{(?:(\d+)|(\w+))\}/g, // match {token} references
-            function (
+            function(
               s, // the matched string (ignored)
               i, // an argument index
               p // a property name
@@ -249,11 +249,11 @@
         outerWrapper : outerWrapper
       };
 
-      if (_this.options.nativeOnMobile && _this.utils.isMobile()) {
+      if ( _this.options.nativeOnMobile && _this.utils.isMobile() ) {
         _this.elements.input = undefined;
         hideSelectWrapper.addClass(_this.classes.prefix + '-is-native');
 
-        _this.$element.on('change', function () {
+        _this.$element.on('change', function() {
           _this.refresh();
         });
       }
@@ -293,6 +293,8 @@
         _this.elements.outerWrapper.width(originalWidth);
       }
 
+      _this.unbindEvents();
+
       if ( !_this.$element.prop('disabled') ) {
         _this.state.enabled = true;
 
@@ -539,15 +541,20 @@
       );
     },
 
-    /** Bind events on the elements */
-    bindEvents: function() {
+    /** Remove events on the elements */
+    unbindEvents: function() {
       var _this = this;
 
       _this.elements.wrapper
         .add(_this.$element)
         .add(_this.elements.outerWrapper)
         .add(_this.elements.input)
         .off(eventNamespaceSuffix);
+    },
+
+    /** Bind events on the elements */
+    bindEvents: function() {
+      var _this = this;
 
       _this.elements.outerWrapper.on('mouseenter' + eventNamespaceSuffix + ' mouseleave' + eventNamespaceSuffix, function(e) {
         $(this).toggleClass(_this.classes.hover, e.type === 'mouseenter');

src/jquery.selectric.js

@@ -1,7 +1,10 @@
+/* eslint-env jasmine, jquery */
+/* global loadFixtures */
+
 'use strict';
 
 describe('events', function() {
-  var select;
+  var select = false;
 
   beforeEach(function() {
     jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
@@ -168,4 +171,10 @@ describe('events', function() {
     expect(hooks.beforeInit).toHaveBeenCalledTimes(2);
 
   });
+
+  it('should not bind events when select is disabled after init', function() {
+    select.prop('disabled', true).selectric('refresh');
+    $('.selectric').trigger('click');
+    expect($('.selectric-wrapper').hasClass('selectric-open')).toBe(false);
+  });
 });

test/events.spec.js

@@ -1,7 +1,10 @@
+/* eslint-env jasmine, jquery */
+/* global loadFixtures, keyvent */
+
 'use strict';
 
 describe('keyboard', function() {
-  var select;
+  var select = false;
 
   beforeEach(function() {
     jasmine.getFixtures().fixturesPath = 'base/test/fixtures';

test/keyboard.spec.js

@@ -1,3 +1,6 @@
+/* eslint-env jasmine, jquery */
+/* global loadFixtures */
+
 'use strict';
 
 describe('mobile', function() {

test/mobile.spec.js

@@ -1,7 +1,10 @@
+/* eslint-env jasmine, jquery */
+/* global loadFixtures */
+
 'use strict';
 
 describe('multiple selects', function() {
-  var select;
+  var select = false;
 
   beforeEach(function() {
     jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
@@ -77,7 +80,7 @@ describe('multiple selects', function() {
     $('.selectric').click();
     expect($('.selectric-wrapper').find('.label > h2').length).toBe(1);
   });
-  
+
   it('should not select disabled items', function() {
     var listItems = $('.selectric-items');
     select.find('option').eq(3).prop('disabled', true);

test/multiple.spec.js

@@ -1,7 +1,10 @@
+/* eslint-env jasmine, jquery */
+/* global loadFixtures */
+
 'use strict';
 
 describe('visibility', function() {
-  var select;
+  var select = false;
 
   beforeEach(function() {
     jasmine.getFixtures().fixturesPath = 'base/test/fixtures';