By Craig Buckler

What’s New in jQuery 1.7

By Craig Buckler

The web’s most popular JavaScript library has been updated. jQuery 1.7 can now be downloaded from Alternatively, if you prefer a CDN, use any of the following URLs:

So let’s look at what’s new…

Removed Features

Before we look at the new and shiny stuff, you should check your existing code. Are you using:

  • event.layerX or event.layerY
  • jQuery.isNaN() (undocumented utility function)
  • jQuery.event.proxy() (undocumented method)

If you are, jQuery 1.7 may break your system.

New Event APIs: on() and off()

The new on() and off() methods unify event handling in jQuery so there’s no need to use bind(), delegate() or the older live() calls. The syntax:

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [events] [, selector] [, handler] );

Example 1 — bind a click event to a link:

// onclick
$("a#mylink").on( "click", MyHandler );

// identical 
// to: $("a#mylink").bind( "click", MyHandler );
// or: $("a#mylink").click( MyHandler );

Example 2 — bind a click event to all items in an unordered list using a delegate:

// onclick
$("ul#mylist").on( "click", "li", MyHandler );

// identical to: 
// $("ul#mylist").delegate( "li", "click", MyHandler );

The existing bind() and delegate() methods still exist, but the team recommend you use on() and off() for all new projects using jQuery 1.7.

HTML5 Support for IE6, 7 and 8

Methods such as html() now support HTML5 tags such as header, footer and article. Note that you’ll still require the HTML5 shiv in those browsers.

New isNumeric() method

As you probably guessed, the new isNumeric() function returns true if a value is a number, e.g.

$.isNumeric(10);		// true
$.isNumeric("10");		// true
$.isNumeric(0);			// true
$.isNumeric("");		// false
$.isNumeric(true);		// false
$.isNumeric(Infinity);	// false

New Callbacks() object

The jQuery.Callbacks() object returns a multi-purpose object used to manage callback lists. In essence, it’s a generalized way to queue and trigger a series of handlers. It’s an advanced feature — in most situations, the higher-level jQuery.Deferred object will be preferable.

Miscellaneous Improvements and Bug Fixes

The following issues have been addressed:

  • Delegate event performance has doubled in 1.7. The jQuery team identified that delegation had become increasingly important in application frameworks and made further optimizations to the core code.
  • Toggling animations including slideToggle() and fadeToggle() now work correctly following a termination of queued effects using stop().
  • The is() method now correctly filters positional selectors such as :first, :last and :even against the document — not the jQuery object passed to is().
  • The .removeData() method now accepts one or more keys within an array or a space-separated string.
  • The .stop() method can be passed an optional string representing the name of the animation queue.
  • jQuery now supports the Asynchronous Module Definition (AMD) for defining modules and dependencies.

Documentation Updates

For further details of all the new features, refer to the 1.7 documentation page. All new features are tagged with “New in 1.7”.

Should You Upgrade?

That’s the million dollar question. The jQuery team work hard to minimize compatibility issues and version 1.7 is unlikely to break your code. That said, if you’re particularly risk-averse, delay updating for a week or two. Minor bugs are normally found, fixed and released quickly.

  • because typeof value==’number’ is so hard to remember and SO worth a far call to an object method… with idiocy like that is it any wonder I call jquery a fat bloated train wreck responsible for ruining more websites than Frontpage?

    Seriously, who out there is dumb enough to actually see advantages to using jquery… wait, don’t answer that. In this age of blowing megabytes to deliver single digit kb of data nonsense like this really does seem to be the norm. I feel really bad for all the nubes duped into thinking tools like jquery, mootools, prototype, yui and all the rest of that asshattery is worth crapping all over a website with.

    • isNumeric goes a little further:
      $.isNumeric(“10”); // true
      (typeof “10”==”number”); // false

      I do think jQuery and other libraries are overused. If you need a little form validation or cookie handling, raw JavaScript is far more efficient.

      That said, for more complex client-side coding, jQuery is lightweight and reduces effort. You don’t have to use it, but you’d need to develop your own cross-browser event and DOM manipulation library.

      • Well said Sir.

      • aaMonkey

        I agree with your last paragraph, Craig. 90kb, when served with gzip compression and appropriate caching headers is nothing. Not only does jQuery save a lot of development time, but it also minimizes the amount of javascript (characters / bytes) that you have to write – so while visitors have to take a one time page load hit on the first visit to a site, you compensate by making all other inline or library javascript smaller.

        It’s not an the answer for everything (and isn’t intended to be), but it is an amazing developer tool. I don’t understand the hate.

    • “Haters gonna hate.”

      C’mon. Somebody had to. That phrase isn’t QUITE dead yet.

    • khrome666

      Did you have your balls crushed by a train, or something? You seem to be in pain. Don’t like it? don’t eat it. Duh!

    • It is a bit like the advantages and disadvantages of buying a car already designed and built. I could go and design my own car and build it my self and thus know exactly how it works, and that it works to my specifications. However, for the vast majority of people that just isn’t an option. Ultimately it would be more satisfying to know that I designed and built it myself but there is a big tradeoff in terms of things like time taken, support, ease of maintenace etc.

      Of course it can be over the top to deliver small amounts of data with large amounts of overhead but is it that big a deal as connection speeds (both fixed and mobile) keep on increasing? At the end of the day for any business it comes down to return on investment, and so survival of the fittest methods.

  • Pono

    Example 2 should be more like that:

    // identical to:
    // $(“ul#mylist”).delegate( “li”, “click”, MyHandler );

    • Whoops – I screwed by selector! Well spotted, thanks.

  • Is example 2 also the same as

    $(“ul#mylist > li”).click(MyHandler);

    ? Because that’s so much more readable to me.

  • And what would these return:


    Might be useful to include…

Get the latest in JavaScript, once a week, for free.