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
