Month: April 2011

by

Announcing jQuery Live-Ready 1.0 Release

jQuery Live-Ready is a combination of jQuery.ready and jQuery.live. Often jQuery-Plugins manipulate content by just registering to $.ready and then go modify the DOM. But whenever additional content is added to a page, that won’t benefit from the registrations.

With $.live in turn, you can subscribe to events even for elements to be added in the future. But live does support the ready-event.

This is where liveReady comes in.

Getting Ready

With liveReady, instead of registering to $.ready, you register your callback to $.liveReady like this:

$.liveReady(function () {
  // this is $(document), or the element(s) added
  this.find('a').css('color', 'red');
});

The registered function will be called on Document-ready and whenever the Extension liveReady() is called on jQuery elements.

Attention: When ‘a’ is the top-level element added, this.find(‘a’) will not return anything. Have a look at the ‘Filtering to a Selector’ section.

Now, when you create new content, you can call liveReady() on the new elements before or after adding them to the dom:

// before (no parent)
$(document).append($('<p>Some <a href="#">Link</a></p>').liveReady())

// after, recommended
var $content = $('<p>Some <a href="#">Link</a></p>');
$(document).append($content);
$content.liveReady()

Filtering to a Selector

In many cases, you only do something with a subset of DOM elements within the ready-Event. With liveReady you then register your function to a specific jQuery selector:
$.liveReady('a', function () {
  // this is $(document), or the element(s) added
  this.css('color', 'red');
});

Now, whenever $(‘…’).liveReady() is executed on new content, the registered function will run with the element itself, if it is an ‘a’, or with all ‘a’-elements liveReady finds within.

Download and Live Hosting

The project is in it’s initial release 1.0. The project code is hosted at Bitbucket. If you find any issues feel free to add them there.

I have also submitted the plugin to jQuery Plugins.

You can download the release archive including a demo here. Or just check out the jQuery Live-Ready 1.0 Demo.

Live Hosting from bitbucket CDN is also available:

<!-- full version -->
<script type="text/javascript" src="https://bitbucket.org/larscorneliussen/jquery.liveready/downloads/jquery.liveready-1.0.js"></script>

<!-- minified version -->
<script type="text/javascript" src="https://bitbucket.org/larscorneliussen/jquery.liveready/downloads/jquery.liveready-1.0-min.js"></script>

 

Happy coding.