Título: Actualizar div sin recargar pagina con jQuery
Publicado por: Drakaris en 5 Agosto 2018, 17:29 pm
estoy intentando actualizar un div sin recargar la página, para ello lo hago con jQuery, y me va bien, pero hay un pequeño error y es que al actualizar el div, las funciones no se ejecutan. Me explico, yo tengo un div donde una serie de actividades que el usuario puede eliminar, y en la funcion puse que al ser exitoso, me recargue el div, de la siguiente manera: $("#divacargar").load("paginaexterna.php");La pagina externa contiene esto. <p id="title"><b>Educaplay</b><i class="fa fa-close close_popup_educaplay"></i></p>
<div id="contenedor">
<?php include('educaplay.php') ?>
</div>
<div class="div_eliminacion">
<svg id="cubo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 76">
<defs>
<style>
.cls-1{fill:#ed1c24;}
.cls-1-tapa{fill:#ed1c24;}
.cls-2{fill:#c1272d;}
</style>
</defs>
<rect class="cls-1" y="16" width="70" height="60" rx="12" ry="12"/>
<rect class="cls-2" x="49" y="26" width="10" height="40" rx="2.5" ry="2.5"/>
<rect class="cls-2" x="29" y="26" width="10" height="40" rx="2.5" ry="2.5"/>
<rect class="cls-2" x="9" y="26" width="10" height="40" rx="2.5" ry="2.5"/>
<path class="cls-1-tapa" d="M80,30H60V27.1A3.12,3.12,0,0,0,56.9,24H43.1A3.12,3.12,0,0,0,40,27.1V30H20a5,5,0,0,0,0,10H80a5,5,0,0,0,0-10Z" transform="translate(-15 -24)"/>
</svg>
<form method="POST" id="form_identificador"><textarea style="display: none;" id="identificador" name="identidad"></textarea></form>
</div>
<img src="http://www.g-t-e.260mb.net/profesorado/imagenes/eliminar_todo_act.png" id="eliminar_todo_educaplay" title="Elimimar todas las actividades" alt="Eliminar todo">
Este div tiene varias funciones como el fa-close para salir del propio div pero al recargar el div autoomáticamente con .load() no funciona, las funciones ya no se ejecutan, y no sé porque. ¿Alguien sabe porque? Gracias.
Título: Re: Actualizar div sin recargar pagina con jQuery
Publicado por: #!drvy en 6 Agosto 2018, 04:30 am
Es por el scope dinámico y el estático del DOM. Generalmente tienes que trabajar sobre un elemento del DOM que haya sido cargado previamente, si cargas nuevo contenido, tienes que buscar de nuevo los elementos a los que quieres afectar. Por ejemplo, si yo quiero una función que se ejecute en sobre un enlace en un div (#contenido) dinámico, tendría hacer scope sobre el div y no directamente sobre los enlaces. De esto:$('#contenido a').on('click', function(e){ // funcion enlace });
Tendría que pasar a hacer esto:$('#contenido').on('click', 'a', function(e){ // funcion enlace });
Para más info, lee el " Direct and delegated event handlers" de aquí: http://api.jquery.com/on/Saludos
|