Actualizar div sin recargar pagina con jQuery

[Drakaris]

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:

Código [Seleccionar] Expandir

$("#divacargar").load("paginaexterna.php");
La pagina externa contiene esto.

Código [Seleccionar] Expandir


      <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.

[#!drvy]

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:

Código (javascript) [Seleccionar] Expandir

$('#contenido a').on('click', function(e){
   // funcion enlace
});

Tendría que pasar a hacer esto:

Código (javascript) [Seleccionar] Expandir

$('#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