So sometimes we need to capture an event to these newly loaded dynamic elements, and the solution in jquery is to use the live function.

Alternatively we can also use the covered by the parent technique, so if the parent of the dynamic element is loaded manually, we can just capture the event by this code.

$('ul').on('click','li',function(){
    alert('Has been clicked.. Do something next');
})

With the code on top we have eliminated the use of making this line

$('li').live('click',function(){
    alert('Has been clicked.. Do something next');
});

because the event for <li> has been covered by the parent <ul>.

Optimize selectors for Sizzle’s ‘right to left’ model
As of version 1.3, jQuery has been using the Sizzle Javascript Selector Library which works a bit differently from the selector engine used in the past. Namely it uses a ‘right to left’ model rather than a ‘left to right’. Make sure that your right-most selector is really specific and any selectors on the left are more broad:

var linkContacts = $(‘.contact-links div.side-wrapper’);

instead of:

var linkContacts = $(‘a.contact-links .side-wrapper’);

More tips from this website
http://dumitruglavan.com/jquery-performance-tips-cheat-sheet/

http://woorkup.com/2009/12/27/10-popular-jquery-plugins-in-2009-you-can%E2%80%99t-miss/

includes the very impressive mapbox and jqtouch

Assign your new table data rows to a variable
var msg="<tr><td>Kristine</td><td>18</td><td>peach</td></tr><tr><td>Vanessa</td><td>25</td><td>strawberry</td></tr>";

Delete the exsiting rows except for the header tr:first – represents first row of the table – which happens to be our header
$("table tr:first").siblings().remove();

Then add the new data, the msg javascript variable used here holds the new table rows data
$("table tr:first").after(msg);

I have a very detailed step by step tutorial you can view here

Rule #1: Separate Javascript Functionality

Bad markup:

Never include Javascript events as inline attributes. This practice should be completely wiped from your mind.

<a onclick="doSomething()" href="#">Click!</a>

Good markup:

All Javascript behaviours should be included in external script files and linked to the document with a

<a href="backuplink.html" class="doSomething">Click!</a>

And the Javascript inside the myscript.js file would contain something like this:

Directions for Use:

1. Include of course jquery.js and jquery.multicolselect.js

2. Create a table put an id to the div “ex. datatable”

3. Run the plugin using this command

$("#datatable").multicolselect({
	   		buttonImage:"selectbutton.gif",
			valueCol:1,
	  		hideCol:0
	   });

4 . Note you need the “selectbutton.gif” so save it.
5. Then your done.

Options