Dear List, i am using jquery 1.3.1 and encountered the following issue:
With the CSS class "int" i want to mark input fields that only accept numerical keyboard input. When i started to add the feature that arrow up increases and arrow down reduces the input value, i found out that the function was actually bound two times to the input field: the values increased in steps of two. Doing some more examining i found out that ALL my functions got bound two times to their nodes. What am i doing wrong? Code: HTML: <input type="text" name="int" class="int" value="0" /> JS: $(document).ready(function(){ FormExtras.init(); }); var FormExtras = { init: function() { $('input.int').each(function(){ this.handler = new FormExtras.int.handler(this)}); }, keyCodes: { numbers: Util.co([48,49,50,51,52,53,54,55,56,57, 96,97,98,99,100,101,102,103,104,105]), del: Util.co([8,46]), arrows: Util.co([37,38,39,40,36, 35, 9]) }, int: { handler: function(node) { self = this; this.node = node; this.allowedKeys = $.extend({}, FormExtras.keyCodes.numbers, FormExtras.keyCodes.del, FormExtras.keyCodes.arrows); this.keydown = function(event) { if(event.keyCode in event.data.self.allowedKeys) { // arrow up if(event.keyCode==38) { event.data.self.node.value++; // arrow down } else if (event.keyCode==40) { event.data.self.node.value--; } $(event.data.self.node).trigger("change"); } else { event.preventDefault(); } } $(this.node) .bind("keydown", {self: self}, self.keydown); } } }; var Util = { co: function(array) { var obj = {}; for( var i=0; i<array.length; i++) { obj[array[i]]=''; } return obj; } }; To prevent it i included the line if(node.handler) return; into FormExtras.int.handler. But why is the each loop matching the same element two times as it seems? Any help is greatly appreciated. Bests, drx