ejemplos de ejemplo de asociar eventos a elementos creados dinámicamente con jquery

ejemplos de ejemplo de asociar eventos a elementos creados dinámicamente con jquery

ejemplos para asociar eventos a elementos creados dinámicamente con jquery

normalmente asociamos los eventos a los elementos que ya tenemos en nuestra página web una vez está cargada y esto lo hacemos con el evento ready del documento como supongo ya conoces, pero para que esto funcione estos elementos deben estar previamente cargados y no cargados dinamicamente

Para solucionar esto, tenemos dos formas:

1ª forma …. función   on()

la función on() NO asocia el evento a los elementos con clase producto,  sino que asocia el código al elemento caja_productos de forma que cuando el evento se dispara y se propaga hasta éste, comprueba si el elemento objetivo tiene clase producto y, en caso afirmativo, dispara el evento sobre él

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>

</head>

<body>
<div id="caja_producto">
<p class="producto">Añadir otro</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#caja_producto").on("click", ".producto", function(){
$(this).after("<p class='producto'>Añadir otro otra vez</p>");
});
</script>
</body>
</html>

2ª forma … creando una función nuestra:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>

</head>

<body>
<div id="caja_producto">
<p class="producto1" onClick="nueva_linea(1);">Añadir otro</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function nueva_linea(cual){
var nuevo=cual+1;
var elemento_nuevo="producto"+nuevo;
var elemento=".producto"+cual;
$(elemento).after("<p class='"+elemento_nuevo+"' onClick='nueva_linea("+nuevo+");'>Añadir otro otra vez</p>");
}
</script>
</body>
</html>

y qué forma es mejor para poder asociar bien los eventos a los elementos que se crean dinamicamente ….

pues yo te recomiendo la primera opción pero no siempre tenemos la jerarquía necesaria en el DOM para que sea funcional y por eso te he mostrado el código de la segunda opción para que veas una forma alternativa ya que esta opción no es la más ortodoxa pero si funciona siempre puesto que quién llama a la función es directamente el elemento creado dinamicamente con jQuery

si quieres más información te recomiendo el siguiente enlace