javascript - ejemplos - setattribute
actualizar DOM después de añadir elemento (4)
Es necesario utilizar la delegación de eventos para el elemento agregado dinámicamente.
$(document).ready(function() {
$(''#main_body'').append("<h1>Hello</h1><input id=/"but/" type=/"button/">Click");
$(''#main_body'').on(''click'', ''#but'', function() {
alert( "bla bla" );
});
});
La delegación de eventos nos permite adjuntar un solo detector de eventos, a un elemento primario, que se activará para todos los hijos que coincidan con un selector, ya sea que esos niños existan ahora o se agreguen en el futuro
¿Por qué la alerta no funciona después de agregar DOM? Debería mostrar "bla bla" después de hacer clic en él.
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(''#main_body'').append("<h1>Hello</h1><input id=/"but/" type=/"button/">Click");
$( "#but" ).on( "click", function() {
alert( "bla bla" );
});
});
</script>
</head>
<body id="main_body">
</body>
</html>
Resuelto
El principal problema fue con ello:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
JQuery era demasiado viejo, creo.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
problema resuelto :)
Para los elementos agregados dinámicamente que necesita delegación de eventos, use la otra versión en jQuery on() , puede delegar eventos al padre estático de los elementos agregados dinámicamente. En tu caso puedes usar #main_body
$(''#main_body'').on( "click", "#but", function() {
alert( "bla bla" );
});
Los eventos delegados tienen la ventaja de que pueden procesar eventos de elementos descendientes que se agregan al documento en un momento posterior. Al elegir un elemento que se garantiza que esté presente en el momento en que se adjunta el controlador de eventos delegado, puede usar eventos delegados para evitar la necesidad de adjuntar y eliminar con frecuencia los controladores de eventos, on()
Su código funciona here porque está agregando el elemento dinámicamente antes de vincular el evento, pero la delegación de eventos lo liberará de la secuencia que usa para agregar los elementos dinámicos.
Tu código debería funcionar
$(document).ready(function () {
$(''#main_body'').append("<h1>Hello</h1><input id=/"but/" type=/"button/">Click");
$("#but").on("click", function () { //element is in DOM now as it added in previous statement
alert("bla bla");
});
});
Usar asi
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$(''#main_body'').append("<h1>Hello</h1><input id=/"but/" type=/"button/">Click");
$(document).on("click", "#but", function () {
alert("bla bla");
});
});
</script>
</head>
<body id="main_body">
</body>
deberías usar la on() para eso
Te ayuda a adjuntar controladores para los elementos creados dinámicamente