Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events. – (source: jquery.com)

This function is extremely similar to the .click() but .click() will only match elements that are created via the XHTML with DOM is loaded. With that said, using .live() is extremely useful for dynamic websites, where you are creating/removing elements on you’re website.

Lets see the base example of using .live()

$('a.edit').live('click', function() {
     alert("The power of .live() - dynamically created objects will have bound events!")
     return false;
});

This code will work for all links that have the class edit, even when new a.link tags are created dynamically after DOM has been loaded. If your code looked like:

$('a.edit-nolive').click(function() {
     alert("Items created via AJAX will be called on using .live()")
     return false;
});

It would not work on dynamically created items. Lets take another look at the full demo. Hopefully this will clear up any problems with understanding how the jQuery .live() function works in comparison to the .click() event. Like to see something else like this? Drop me a line.

Related posts:

1. jQuery Timeout Function A neat and simple way to creating a jQuery function...
2. Create a jQuery Accordion – remain open after page load Quick fix to keep accordion section open after loading different...
3. Combining Selectables And Draggables Using jQuery UI Learn how to work with both selectable and draggable with...

$(".menu-header").click(function() {
        $(this).next().toggle('slow');
        return false;
}).next().hide();

The HTML would look something similar to:

art gallery

traditional
digital
posters
icons
fonts

verse

Poems
Stories

That code will use jQuery’s toggle() function. When the user clicks the h2 tag it will close all elements until the next
tag. This snippet is very handy for creating a quick accordion effect, this can also be found on the jQuery’s documentation

Now we have the guts sorted out, but the problem is if you travel to another page within that category, it will close. I’m sure you want to check out the code that is going to do this.

Keep that open!

var matches;
     if( matches = (new String(document.location)).match(/?c=w+/) ) {
        $("a[href=" + matches[0] + "]").parents("ul").toggle();
     }

The code above is fairly straight forward. The first line checks to see if we already have a sub-menu open. It evaluates by looking at the current pages URL “?c=page_here”.

The latter part of the code. Now that we grabbed the current URL of the sub-menu, we can use this to find the parent menu which is the
ul and display it:

$("a[href=" + matches[0] + "]").parents("ul").toggle();

The quick fix to keep your accordion block open while traveling to different URLS. To achieve the URLS of “?c=page”. I am using this PHP code below save it as index.php, also create a header.php and a footer.php.

Give it a shot, hope that this can work for you, it did wonders for my project. Also thanks to Kent, for helping me. If it did work post some examples!

Related posts:

1. Working with the jQuery live function Find out how to use jQuery .live() and how it...
2. How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...
3. Combining Selectables And Draggables Using jQuery UI Learn how to work with both selectable and draggable with...