Javascript Tips

 

Put all your JS within an anonymous function using the following template

(function ($) {
	'use strict';

        // global variables go here
        var foo, bar;

	// put code that can be executed before the document is ready, e.g.
        $(window).on('hashchange', function() {
             foo = true;
        }

        $('#content').on('click', "a", function() {
             foo = false;
        }

        // functions go here
        function filterByCheckbox() {

        }

        function validate() {
             // some code
             $("input").trigger("validationPassed");
        }

        // put code that must/should be triggered after the document is ready
        $(document).on ("ready", (function () {
		// on load code goes here, e.g.
		filterByCheckbox();
                foo = true;

		$('div.reports ul.tabs').append("abc");

                // on event handlers (click, focus, submit, etc) go here, e.g.
		$("select").on("change", function() {
                      // something
		});

		$("select").on("blur",validate);

                $("select").on("validationPassed", function() {
                      // something
		});
	});
}(jQuery));

Put each separate code block that serves a separate purpose in a separate template above. Since Javascript is asynchronous, it can execute each code in each block / template simultaneously instead of one at a time.

Never trigger events using element.event(). Always use jQuery to handle events in a cross-browser way, e.g.

BAD

window.hashchange = function() {

}

GOOD

$(window).on('hashchange', function() {

});

For events, always use the jquery “on” and “off” functions to attach/bind and detach/unbind events. .live() is deprecated so use “on” with a subselector.

Normally, when you bind an event handler to an element, you do something like:

$("a").on('click', function (event) { ...

When binding event handlers to elements that are dynamically-generated, you’ll want to do it when the element is in the document, so use this format:

$(document).on('click', " a", function (event) { ...