itlivewire dev blogJust another web development blog…

We always encounter them on our JavaScript apps, the dynamic elements, most of the time they are in the form of new rows in the table <tr><td></td></tr> or a new list <li> from a <ul>.

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>.

woorkup features the top jquery plugins of 2009

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

To dynamically change the table rows use this smart approach using jquery

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

A jquery plugin that creates a multiple column selectbox
Donwload plugin at: http://code.google.com/p/jquerymulticolumnselectbox/

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

Visual Jquery 1.2.6 by remysharp

http://remysharp.com/visual-jquery/