jQuery cómo vincular el evento onclick al elemento HTML agregado dinámicamente [duplicado]
Quiero vincular un evento onclick a un elemento que inserto dinámicamente con jQuery
Pero nunca ejecuta la función vinculada. Me encantaría que pudieras indicarme por qué este ejemplo no funciona y cómo puedo lograr que se ejecute correctamente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>test of click binding</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
jQuery(function(){
close_link = $('<a class="" href="#">Click here to see an alert</a>');
close_link.bind("click", function(){
alert('hello from binded function call');
//do stuff here...
});
$('.add_to_this').append(close_link);
});
</script>
</head>
<body>
<h1 >Test of click binding</h1>
<p>problem: to bind a click event to an element I append via JQuery.</p>
<div class="add_to_this">
<p>The link is created, then added here below:</p>
</div>
<div class="add_to_this">
<p>Another is added here below:</p>
</div>
</body>
</html>EDITAR: edité el ejemplo para que contenga dos elementos en los que se inserta el método. En ese caso, la alert()llamada nunca se ejecuta. (gracias a @Daff por señalarlo en un comentario)
Todos estos métodos están en desuso. Debes utilizar el onmétodo para resolver tu problema.
Si desea apuntar a un elemento agregado dinámicamente, deberá usar
$(document).on('click', selector-to-your-element , function() {
//code here ....
});
esto reemplaza el .live()método obsoleto.
El primer problema es que cuando llamas a append en un conjunto jQuery con más de un elemento, se crea un clon del elemento a agregar para cada uno y, por lo tanto, se pierde el observador de eventos adjunto.
Una forma alternativa de hacerlo sería crear el enlace para cada elemento:
function handler() { alert('hello'); }
$('.add_to_this').append(function() {
return $('<a>Click here</a>').click(handler);
})
Otro problema potencial podría ser que el observador de eventos se adjunte antes de que el elemento se haya agregado al DOM. No estoy seguro de si esto tiene algo que decir, pero creo que el comportamiento podría considerarse indeterminado. Un enfoque más sólido probablemente sería:
function handler() { alert('hello'); }
$('.add_to_this').each(function() {
var link = $('<a>Click here</a>');
$(this).append(link);
link.click(handler);
});
