Hi, I'm currently building a list when the document is ready, then performing a sort on the list if the user clicks "sort Asc" or "sort Desc". However, when the list is sorted and redisplayed, I lose the original "click" event.
How can I keep this event after sort? Below is example code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script language="JavaScript" type="text/javascript"> google.load("jquery", "1.2.6"); </script> <script language="JavaScript" type="text/javascript"> jQuery.fn.sort = function() { return this.pushStack( jQuery.makeArray( [].sort.apply( this, arguments ) ) ); }; $(document).ready( function(){ for( var i = 1; 10 > i; i++){ var elm = $("<li />"); var a = $("<a />").append( document.createTextNode( 'click: ' + i ) ); $(a).click( function(){ alert('click:'); }); $(a).addClass("boldface"); $(elm).append(a); $('#list').append( elm ); } }); function sortFunction(){ var elms =[]; if ( $('#sortDesc:checked').length > 0 ){ elms = $('#list li').sort( function (a,b){ if ( $(a).text() == $(b).text() ){ return 0; } return ($(a).text() > $(b).text() ) ? -1 : 1; }); }else{ elms = $('#list li').sort( function (a,b){ if ( $(a).text() == $(b).text() ){ return 0; } return ($(a).text() < $(b).text() ) ? -1 : 1; }); } $('#list li').remove(); $('#list').append( elms ); } </script> </head> <body> TEST LIST <P/> <input type="radio" id="sortDesc" name="sort" value="desc" onClick="sortFunction()">Sort Desc <input type="radio" id="sortAsc" name="sort" value="asc" checked="checked" onClick="sortFunction()">Sort Asc <ol id="list"> </ol> </body> </html>
