J
juanolo2001
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Tengo el siguiente código, en los comentarios del código comento el problema ¿porque sucede esto? ¿como puedo hacer para que funcione?:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--
Tenemos un listado.
En la primera opción del listado se encuentra un enlace, el cual, al hacer clic llama a una función y muestra un alert.
Tambien tenemos un botón, el cual, añade un nuevo li con un mismo enlace exactamente igual al primero, al hacer clic en este nuevo enlace, NO entra en la funcion que muestra el alert.
¿Por qué? ¿Que hay que hacer para que al añadir contenido dinamicamente mediante append, jquery detecte el nuevo elemento añadido y entre en la función del alert?
-->
</head>
<body>
<a href="#" class="nuevaSeccion">Nueva sección</a>
<ul id="listado">
<li><a href="#" class="menuSeccion">Seccion 1</a></li>
<li>Seccion 2</li>
<li>Seccion 3</li>
<li>Seccion 4</li>
</ul>
<script>
$('.nuevaSeccion').on('click',function(){
$('#listado').append('<li><a href="#" class="menuSeccion">Seccion nueva</a></li>');
});
$('.menuSeccion').on('click',function(){
alert('Entra en la función');
});
</script>
</body>
</html>
