playlist dinamico con etiqueta audio y jquery

[lord_ajp]

He encontrado algo de informacion en san google, y creo que hay puede estar el fallo, resulta que cuando recargo el div con la consulta hecha a la base de datos añado nuevos elementos al dom a los cuales no puedo atribuirles nuevos eventos oero no tengo muy claro como resolver el problema. Coloco algo mas de codigo para los botones por si alguien lo quiere ver funcionando.

Código HTML:

//clic en el boton play
$('#btnReproducir').on('click',function(){
	$.reproducir();
});
//clic en el boton pausa
$('#btnPausar').on('click',function(){
	audio.pause();
});
//subir el volumen del reproductor
$('#btnSubirVolumen').on('click',function(){
	if(audio.volume!=1) audio.volume+=0.1;
});
	
//bajar el volumen de la reproduccion
$('#btnBajarVolumen').on('click',function(){
	if(audio.volume!=0) audio.volume-=0.1;
});
//clic en el boton silencio
$('#btnSilencio').on('click',function(){
	audio.muted=!audio.muted;
});
//clic en el boton siguente
$('#btnSiguiente').on('click',function() {
    $.siguiente();
});
//clic en el boton anterior
$('#btnAnterior').on('click',function() {
    $.anterior();
});

$(document).keydown(function(tecla){
	tecla.preventDefault();
	//tecla derecha
    if (tecla.keyCode == 39) { 
        $.siguiente();
    //tecla izquierda    
    } if (tecla.keyCode == 37) {
    	$.anterior();
    // tecla espacio	
    } if (tecla.keyCode == 32) {
    	audio.playPause();
    // subir volumen	
    } if (tecla.keyCode == 38) {
		if(audio.volume!=1) audio.volume+=0.1;
	// bajar volumen
    } if (tecla.keyCode == 40) {
		if(audio.volume!=0) audio.volume-=0.1;
	}
});

y el archivo .css

Código HTML:

body{
	font: normal 12px Tahoma, Verdana, Arial, sans-serif;
	background: #f1f1f1;
}
#cajageneral {
	border-radius: 5px;
	border: 8px ridge;
	width: 800px;
	margin: 0 auto;
}

.botones {
	margin: 2px;
}
.botones1 {
	margin: 2px;
}

#divControles{
	text-align: center;
}

#contador {
	background-color: black;
 	color: green;
 	width: 96px;
 	height: 48px;
	border-radius: 3px; 
 }
#divProgreso{
	height: 15px;
			margin: 10px;
			border: inset 1px #f1f1f1;
			border-radius: 3px;
			overflow: hidden;
}

#divBarra{
				width: 0;
				height: 100%;
				background: #FF7E8A;
				border-right: solid 2px #f00;
}

#divLista{
			padding: 5px;
			overflow-x: auto;
			height: 400px;
			color: #777;
			font-size: 11px;
		}
			#divLista ol{
				padding-left: 10px;
			}
#divLista ol li{
					border-bottom: dashed 1px #f1f1f1;
					padding: 5px;
					cursor: pointer;
					border-radius: 3px;
				}
					#divLista ol li:hover{
						background: #FF7E8A;
						color: #fff;
						text-shadow: 1px 1px 1px #000;
					}
					#divLista ol li.reproduciendo{
						background: #21BFF2;
						color: #fff;
						text-shadow: 1px 1px 1px #000;
					}
					#divLista ol li:last-child{
						border-bottom: none;
					}