Wie man mich ersetzen Neue Elemente hinzugefügt, um eine Seite mit jQuery

Question

Hier ist das Szenario ... Ich habe eine eine Checkbox neben jedem Feld, dass ich beim Laden der Seite bin Ersetzen mit jquery mit „Delete“ Text, der mir ermöglicht, das Feld über jquery zu löschen, was in Ordnung arbeitet. Wie so ...

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

Das Problem kommt in ist jedoch, dass nach dem Laden der Seite, ich bin auch den Benutzer die Möglichkeit zu geben, um dynamisch neue Felder hinzuzufügen. Die neu hinzugefügten Felder obwohl das Kontrollkästchen und nicht auf den Link Löschen, weil sie nicht durch jquery ersetzt werden, da sie nach dem ersten Laden der Seite hinzugefügt werden.

is't möglich, den Inhalt der neuen Elemente zu ersetzen, die Seite hinzugefügt, ohne eine Aktualisierung der Seite zu tun? Wenn nicht, kann ich immer zwei Vorlagen mit verschiedenen Markup je eine für js und eine für Nicht js, aber ich habe versucht, avoind taht.

Vielen Dank im Voraus.

Answer 1

Sie können mit der .livequery() Plugin , wie folgt aus:

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

Die anonyme Funktion ist gegen jedes Element ausgeführt werden gefunden, und jedes neue -Element Anpassung der Wähler, wenn sie hinzugefügt sind.

Answer 2

Haben Sie einen Blick auf diese kool Demo. Es entfernt und fügt Elemente wie ein Charme.

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

Hier ist, wie:

Vor allem die (x) HTML ist wirklich einfach. xHTML Snippet

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

Das versteckte Eingabeelement einfach gibt Ihnen die Möglichkeit dynamisch eine Nummer anrufen Sie beginnen könnten. Dies könnte zum Beispiel mit PHP oder ASP eingestellt werden. Das Onclick-Ereignishandler wird verwendet, um die Funktion aufzurufen. Schließlich wird das div-Element gesetzt und bereit, einige Kinder zu sich selbst (Gosh, dass Klänge wierd).

angehängt zu erhalten

Mkay, so weit, so einfach. Nun ist die JS-Funktionen.

addElement JavaScript-Funktion

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

Und wenn Sie wollen,

removeElement JavaScript-Funktion

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

und das ist, dass. Bobs dein Onkel.

Das von diesem Artikel / Tutorial genommen wird: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Ich habe gerade diese selbst gelernt. danke für die Frage

Ich hoffe, das hilft.

PK