Did you look at the 'livequery' plugin?

On Apr 21, 8:21 am, Blaine <bla...@worldweb.com> wrote:
> 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>

Reply via email to