Forums

JohnMotylJr

Hello internet peoples of css-tricks...

First time creating a plugin and wondering if what im doing here is proper ( as far as event handling goes ). Do i need to do this differently or is this ok. Mainly just wondering about the keydown and keyup functions.

(function($) {
	$.fn.codeScanner = function() {
	
		var $this = $(this);
		var scanID = "";
		
		$this.keydown(function(event) {
			scanID += "ok";
		});
		
		$this.keyup(function(event) {
			alert(scanID);
		});
		
	};
})(jQuery);

SgtLegend

When you create a plugin you always need to return the current jQuery object for the element which allows for method chaining, also rather then using the keydown() and keyup() methods you should be using the on() method as it has event delegation built into it which allows for more dynamic event handlers in the DOM. See the below code which i updated to reflect this.

(function($) {
	$.fn.codeScanner = function() {

		return this.each(function() {
			var scanID = '';

			this.on({
				keydown :, function(e) {
					scanID += 'ok';
				},
				keyup : function(e) {
					alert(scanID);
				}
			});
		});

	};
})(jQuery);

JohnMotylJr

@SgtLegend,

That is super cool and thank you for that updated code. You're correct, the .on( ) method is going to be really helpful here.

Thanks so much. You have totally solved my problem.

treehouse : what would you like to learn today?

Forums

[Solved] First time creating a plugin, is this proper?