After 4 months since the last software release the guys behind jQuery finally published the newest version of the framework. jQuery version number 1.9.0 finally hit the shelves containing few interesting and surprising changes.

I wouldn't normally care about a version update - we are used to those and they usually contain performance/speed improvements or add new features not affecting the rest of the code. 1.9.0 however, changes few things, and boy o'boy, I think those changes will cause problems to web designers / javascript developers out there who are hoping for easy upgrade.

Let's cover few biggest (IMHO) changes and let's see how we can go about changing our legacy code so it's compatible with the latest version of the jQuery.

$.browser is gone

First huge change is complete removal of the browser detection feature. What it means for you is that if anywhere in your code you check the browser type or version using jQuery, you will encounter this error:

TypeError: $.browser is undefined

The affected code will probably look similar to this, note you might be testing for different browser or version:

if ($.browser.msie && parseInt($.browser.version, 10) > 8)) { ... }

You might use similar syntax to check if user is running particular browser/version in order to show different features and to offer different experience based on the rules of graceful degradation / progressive enhancement. I've seen similar code in the past which role was to detect Internet Explorer and disable certain not-yet-supported features such as HTML5 video or CSS3 gradients

The bad news is - you should not be doing it in the first place. Checking the version of the browser is a really bad habit as it involves testing the constantly changing User Agent of the browser, even if this feature is encapsulated inside of a framework. And as we all know, User Agent strings can be deceptive.

Luckily there is a right way to do it, which involves feature detection. Let's face it - if we want to use CSS3 or HTML5 all we care about is if user can actually support it. We don't care what browser is he running as long as the experience we offer will work.

And this is the reasoning behind the removal of $.browser from jQuery. jQuery Foundation believes that $.browser has been abused long enough and it is about time for all coders to start using correct feature detection. jQuery recommends the use of libraries such as Modernizr in order to test whether the feature we need is supported by the browser.

We can use Modernizr to detect features, such as canvas element support. Instead of checking for the particular version of the Internet Explorer that doesn't support it, we can just do:

if (Modernizr.canvas) {
 //good to go 
 var ctx = mycanvas.getContext("2d");
 //and so on...
} else {
  // no canvas support, provide alternate method
}

Using feature detection allows us to forget about the versions and focus on what really matters here - the actual support for the feature we need.

In conclusion, the removal of the $.browser is a good thing and even though it will cause few problems when upgrading it will definitely help you move in the right direction.

.live() is dead

Another surprising change in the jQuery 1.9.0 is deprecation of the .live() method. Method particularly useful when binding events to the elements that haven't been created yet. Since jQuery 1.9.0 you will run into this error when you try to use it:

TypeError: $(...).live is not a function

As mentioned already .live() was particularly useful in scenarios when we wanted to attach an event to element that is dynamically added to the page, for instance:

	$('#buttons input').live('click', function(){
		console.log('Button Clicked!');
	});
	$('#buttons').append('');

This code would normally allow us to add any amount of the input elements to the parent div ensuring that each of them, when created, will still have the click binding.

The question arises - what to do now that .live() has been removed from jQuery? Luckily for us the answer is provided in the offical upgrade guide, and in our scenario it applies as follows:

	$(document).on('click', '#buttons input', function(){
		console.log('Button Clicked!');
	});
	$('#buttons').append('');

As you can see .live() has been replaced with .on() called on the document object. I couldn't get to the bottom of this decision but I believe the it was fueled by the desire to unify how the framework listens for the events.

$(string) takes nodes only

Another change introduced by jQuery 1.9.0 is the way how jQuery handles HTML literals passed to the global jQuery object.

Up to this point, we were allow to do things such as:

$('hello world').appendTo('body');

Which would actually produce correct markup removing the 'hello' and creating the 'world' div:

<body>
    world
</body>

This behavior changes in jQuery 1.9.0 as from now on this method only supports string starting with less-than ("<") character. When we try to use the same code in 1.9.0, we get this error:

Error: Syntax error, unrecognized expression: hello world

And more

As you can see jQuery 1.9.0 changes few important things and it can affect the code you're running. Upgrading to 1.9.0 might involve bit of the development effort but it's totally worth it, considering the future jQuery releases will be based on 1.9.0. Make sure you're not stuck with the outdated software and upgrade your code accordingly.

For those who can't jump right into the code refactoring or find themselves with multiple problems when upgrading, jQuery Foundation released cool migration plugin which will allow you to run latest version of jQuery code with your current code base. It will give you more time to slowly upgrade the parts of the code affected by the changes.

Make sure you check out the official jQuery Upgrade Guide which describes in details the few changes I described, as well as many others not mentioned in this article