Me encuentro con un problema a la hora de pulsar sobre un elemento de una coleccion. Adjunto el código y os comento.
mostrarListaEjercicios:function(datos){
$('#listaEjercicios').remove();
if (window.localStorage.getItem('alu')){
var cadena = '<div id="listaEjercicios"><ul class="collection">';
cadena = cadena + '<li class="collection-header"><h4>Lista de Ejercicios</h4></li>'
for(var i=0;i<datos.length;i++){
cadena = cadena + '<li class="collection-item avatar"><a href="#!" ><i class="material-icons circle">create</i>';
cadena = cadena + '<span class="title">'+datos[i].nombre+'</span><p>'+datos[i].dificultad+'</p>';
cadena = cadena + '<a class="secondary-content"><i class="medium material-icons" >play_circle_outline</i></a></a></li>'
}
cadena=cadena+'</ul>';
cadena=cadena+'</div>';
$('#messageDiv').append(cadena);
$('.collection li a span').click(function(){
var nombreEjercicio=$(this).text();
if (nombreEjercicio!=""){
var textoEjercicioElegido;
var respuestaEjercicioElegido;
for(var j=0;j<datos.length;j++){
if(datos[j].nombre==nombreEjercicio){
textoEjercicioElegido=datos[j].texto;
respuestaEjercicioElegido=datos[j].respuesta;
}
}
rest.elegirEjercicio(nombreEjercicio);
app.mostrarEjercicio(textoEjercicioElegido);
}
})
}
},
El problema es el siguiente. Al pulsar sobre la colección, para que me haga las acciones de dentro del $('.collection li a span').click(function())
, debo de pulsar sobre la etiqueta , ya que necesito capturar el valor que tengo en ella. Lo que me gustaría conseguir, es que al pulsar sobre cualquier parte de dicho elemento de la colección, y no en concreto sobre la etiqueta , me realizara las mismas acciones. El problema que me encuentro, es que si hago $('.collection li a').click(function())
no se captura el valor de la etiqueta con var nombreEjercicio=$(this).text();
<li>
padre y luego hacer$(this).find('span').text()
(busca dentro del<li>
el hijo que sea un<span>
)