[jQuery] Sort losing click association
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>