Comment je remplacer Nouveaux éléments ajoutés à une page avec Jquery

Question

Voici le scénario ... J'ai une case à cocher à côté de chaque champ que je remplaçais la charge de page avec jquery avec le texte « Supprimer » qui me permet de supprimer le champ via jquery, qui fonctionne très bien. Comme si ...

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

Le problème vient est cependant que, après chargement de la page, je suis également donner à l'utilisateur la possibilité d'ajouter dynamiquement de nouveaux champs. Les nouveaux champs ajoutés ont bien la case à cocher et non le lien de suppression parce qu'ils ne sont pas remplacés par jquery, car ils sont ajoutés après la charge de la page initiale.

is't possible de remplacer le contenu des nouveaux éléments ajoutés à la page sans faire rafraîchir la page? Sinon, je peux toujours avoir deux modèles avec différentes balises selon un pour js et un pour non js, mais je tentais de avoind TAHT.

Merci à l'avance.

Answer 1

Vous pouvez utiliser le .livequery() plug-in , comme ceci:

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

La fonction anonyme est exécutée sur chaque élément trouvé, et chaque nouveau élément correspondant au sélecteur comme ils sont ajoutés.

Answer 2

Jetez un oeil à cette démo kool. Il supprime et ajoute des éléments comme un charme.

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

Voici comment:

Tout d'abord, le (x) html est très simple. xHTML Snippet

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

L'élément d'entrée caché vous donne simplement la possibilité d'appeler dynamiquement un numéro que vous pouvez commencer. Cela pourrait par exemple être réglé avec PHP ou ASP. Le gestionnaire d'événements onclick est utilisé pour appeler la fonction. Enfin, l'élément div est réglé et prêt à recevoir des enfants en annexe à elle-même (ça alors que les sons wierd).

Mkay, à ce jour si facile. Maintenant, les fonctions JS.

addElement JavaScript Fonction

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

Et si vous voulez,

removeElement JavaScript Fonction

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

et c'est que. bobs votre oncle.

est tirée de cet article / tutoriel: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Je viens d'apprendre moi-même. je vous remercie de la question

L'espoir qui aide.

PK