Nunca entendí realmente lo que sucede detrás del comportamiento de los elementos creados dinámicamente. Aquí hay un ejemplo:

$('.some-list').append('<div class="node"></div>');

¿Dónde se almacena eso ahora? ¿Cómo puedo acceder al elemento div $ ('. node')?

Conozco el método jQuerys 'on' para eventos, pero ¿cómo puedo simplemente acceder y manipular ese elemento? Gracias.

1
J. Doe 7 jun. 2016 a las 19:44

3 respuestas

La mejor respuesta

Si $('.some-list') está presente en el documento o no, simplemente puede usar:

$('.some-list')
  // append returns the original collection ("$('.some-ist')"),
  // not the newly-added element(s)
  .append('<div class="node"></div>')
  // so here we can use "find('.node')" to find the newly added
  // element(s):
  .find('.node')

En el caso de que $('.some-list') ya esté presente en el documento:

$('.some-list').append('<div class="node">The newly-added Element</div>').find('.node').css('color', '#f90');
.some-list div {
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="some-list">
  <div>Existing node</div>
</div>

En el caso de que el elemento $('.node') no esté presente en el documento:

var someList = $('<div />', {
    'class': 'some-list',
    'html': '<div>Existing element</div>'
  }),
  newNode = someList.append('<div class="node">The newly-added Element</div>').find('.node');

console.log(newNode);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Referencias:

2
David says reinstate Monica 7 jun. 2016 a las 16:58

Simplemente usa $('.node').... Pero creo que comprende que no puede manipular un elemento que aún no existe (no puede acceder a .node antes de que se agregue)

0
Gustav G 7 jun. 2016 a las 16:47

Así que analicemos lo que sucedería detrás de escena aquí. Primero tenemos que entender el HTML que se vería más abajo.

<html>
    <head>
        <!-- Some code here -->
    </head>
    <body>
        <!-- Some Code here -->
        <div class="some-list"></div> <!-- Assuming it to be div as that's the most generic way I'd explain, but it could be any element for that matter -->
        <!-- Some Code here -->
    </body>
</html>

Tenga en cuenta que cuando escriba $('.some-list'), JQuery seleccionará el div con class=some-list y luego agregará una cadena aleatoria dentro de eso por .append('<div class="node"></div>'); ahora cuando use el apéndice de JQuery, intentará ver si los datos pasados (en este caso, una cadena) son un objeto o no. si el objeto lo hace internamente element.appendChild de lo contrario lo hace internamente element.innerHTML=string.

Ahora, para acceder al elemento, escriba $ ('.nodo'), ya que significa que está tratando de obtener los elementos del dom con nombres de clase como nodo . Dado que hace esto después de .append, estará disponible en el DOM y ahora puede acceder a él como cualquier otro elemento que ya estuviera presente en el DOM.

Nota: La confusión se debe a que la mayoría de las veces el archivo adjunto del evento ocurre cuando el documento está listo y estos elementos creados dinámicamente se agregan más tarde y no activan estos eventos. Para evitar estos escenarios, utilice delegaciones. Busque el método .on de JQuery en detalle.

1
Akshay Khandelwal 7 jun. 2016 a las 16:57