Come ho Sostituire Nuova elementi aggiunti a una pagina con jQuery

Question

Qui è lo scenario ... Ho un una casella di controllo accanto a ciascun campo che sto sostituendo al caricamento della pagina con jQuery con il testo "Delete", che mi permette di eliminare il campo tramite jQuery, che sta lavorando bene. In questo modo ...

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

Il problema si presenta in però è che, dopo il caricamento della pagina, sto anche dando all'utente la possibilità di aggiungere dinamicamente nuovi campi. I nuovi campi aggiunti hanno anche se la casella di controllo e non il collegamento Elimina perché non sono sostituiti da jQuery in quanto essi vengono aggiunti dopo il caricamento della pagina iniziale.

is't possibile sostituire il contenuto di nuovi elementi aggiunti alla pagina senza fare un aggiornamento della pagina? In caso contrario, posso sempre avere due modelli con diversa a seconda marcatura uno per js e uno per i non js, ma stavo cercando di taht avoind.

Grazie in anticipo.

Answer 1

È possibile utilizzare la .livequery() plug , in questo modo:

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

La funzione anonima viene eseguito su ogni elemento trovato, e ogni nuovo elemento che corrisponde al selettore di come sono aggiunti.

Answer 2

Date un'occhiata a questo Kool demo. Rimuove e aggiunge elementi come un fascino.

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

Ecco come:

Prima di tutto, il (x) html è reale semplice. Snippet xHTML

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

L'elemento di input nascosto semplicemente ti dà la possibilità di chiamare in modo dinamico un numero si potrebbe iniziare con. Questo, per esempio, potrebbe essere fissato con PHP o ASP. Il gestore di eventi onclick viene utilizzato per chiamare la funzione. Infine, l'elemento div è impostato e pronto a ricevere alcuni bambini allegati a se stessa (accidenti che suoni strano).

Mkay, finora così facile. Ora le funzioni JS.

Funzione 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);
}

E se si vuole,

Funzione removeElement JavaScript

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

e questo è quello. Bobs tuo zio.

Questo è preso da questo articolo / tutorial: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Ho appena imparato questo me stesso. grazie per la domanda

La speranza che aiuta.

PK