Cómo puedo reemplazar nuevos elementos a una página con jQuery

Question

Este es el escenario ... tengo una una casilla de verificación junto a cada campo que estoy reemplazando al cargar la página con jQuery con el texto "Borrar" que me permite eliminar el campo a través de jQuery, que está funcionando bien. Al igual que ...

$(".profile-status-box").each(function(){ $(this).replaceWith('<span class="delete">' + 'Delete' + '</span>') });

El problema viene sin embargo, es que después de carga de la página, yo también estoy dando la opción al usuario añadir dinámicamente nuevos campos. Los nuevos campos añadidos, aunque tienen la casilla de verificación y no el enlace borrar porque no están siendo reemplazados por jQuery, ya que están siendo añadidos después de la carga de la página inicial.

is't posible reemplazar el contenido de los nuevos elementos añadidos a la página sin tener que hacer una actualización de la página? Si no es así, siempre puedo tener dos plantillas con diferentes marcas en función de uno y otro para js js no, pero yo estaba tratando de taht avoind.

Gracias de antemano.

Answer 1

Puede utilizar el .livequery() complemento , como esto:

$(".profile-status-box").livequery(function(){ 
  $(this).replaceWith('<span class="delete">Delete</span>') 
});

La función anónima se ejecuta en todos los elementos encontrados, y cada nueva elemento que cumpla con el selector a medida que se añaden.

Answer 2

Tenga una mirada en esta demo Kool. Se elimina y añade elementos como un encanto.

http://www.dustindiaz.com/basement/addRemoveChild.html

Así es como:

En primer lugar, la (X) HTML es muy sencillo. xHTML fragmentos

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

El elemento de entrada oculta simplemente le da la oportunidad de llamar dinámicamente un número que podría comenzar con. Esto, por ejemplo, se podría establecer con PHP o ASP. El controlador de eventos onclick se utiliza para llamar a la función. Por último, el elemento div se establece y listo para recibir a algunos niños adjuntas en sí mismo (Gosh que los sonidos extraño).

Mkay, hasta ahora tan fácil. Ahora las funciones de JS.

Función addElement JavaScript

function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
  ni.appendChild(newdiv);
}

Y si quieres,

Función removeElement JavaScript

función removeElement (divNum) {   var d = document.getElementById ( 'myDiv');   var olddiv = document.getElementById (divNum);   d.removeChild (olddiv); }

y eso es eso. bobs su tío.

Esto está tomado de este artículo / tutorial: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Me acaba de aprender esto por mí mismo. gracias por la pregunta

Espero que ayude.

PK