Comment remplacer de 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 remplace lors du chargement de la page avec jquery avec le texte "Supprimer" qui me permet de supprimer le champ via jquery, qui fonctionne 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 cependant la case à cocher et non le lien de suppression car ils ne sont pas remplacés par jquery car ils sont ajoutés après le chargement de la page initiale.

Est-il possible de remplacer le contenu des nouveaux éléments ajoutés à la page sans actualiser la page? Si ce n'est pas le cas, je peux toujours avoir deux modèles avec un balisage différent en fonction de l'un pour js et l'autre pour le non js, mais j'essayais d'éviter le taht.

Merci d'avance.

Answer 1

Vous pouvez utiliser le .livequery() plugin, 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 nouvel élément correspondant au sélecteur comme ils sont ajoutés.

Answer 2

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

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

Voilà 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, par exemple, pourrait être réglé avec PHP ou ASP. Le gestionnaire d'événement onclick est utilisé pour appeler la fonction. Enfin, l'élément div est défini et prêt à recevoir des enfants ajoutés à lui-même (ça sonne bizarre).

Mkay, jusqu'ici 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 ça. Bob est ton oncle.

C'est extrait de cet article/tutoriel: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Je viens d'apprendre moi-même.merci pour la question

Espérons que ça aide.

PK