So ersetzen und anhängen mit Javascript

Question

Ich habe ein Kommentar-System, in dem ich Inline-Editing realisieren möchte (wenn jemand ein gutes Plugin oder ähnliches kennt, bitte zögern Sie nicht, mir einen Namen zu geben) und ein Javascript-Snippet gefunden Das ersetzt den Text durch einen Textbereich und den Text als Wert dieses Textbereiches.

Aber jetzt muss ich eine Schaltfläche (Absenden-Schaltfläche) zu dieser Textarea hinzufügen, damit der Benutzer den Text, den er bearbeitet hat, speichern konnte.

Mein Code sieht nun wie

<span id="name">comment</span> 

<div onclick="replacetext();">test</div> 

<script type="text/javascript"> 
    function replacetext(){ 
      $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() })); 
    </script> 

ich es mit $("#name").append('<button>yes</button>'); getestet haben, aber es hat nicht funktioniert.

Answer 1

Die Lösung kann versucht werden, um die folgende jsFiddle mit: http://jsfiddle.net/adb8X/5/

Die Linie, die ich Sie glauben, sind nach its:

$('<button>yes</button>').insertAfter("#name"); 

Der obige Code fügt ein neu erstelltes DOM-Element (ja) direkt nach dem DOM el ein mit der angegebenen ID im Zielselektor ("#name").

Mehr über insertAfter hier: http://api.jquery.com/insertAfter/

Wenn Sie es in replacetext() eingefügt werden soll, wird es geworden:

function replacetext() { 
    $("#name").replaceWith($('<textarea>').attr({ 
     id: 'name', 
     value: $('#name').text() 
    })); 

    $('<button>yes</button>').insertAfter("#name"); 

} 

---

Hinweis: Ich habe Ihr jsFiddle auch korrigiert. Bitte überprüfen Sie hier: http://jsfiddle.net/adb8X/5/ (Es gab Probleme mit den Einstellungen und einen kleinen Tippfehler, wenn ich mich richtig erinnere). Die entsprechende Zeile in dem heißt:

$("#name").append($('<button>hi</button>')); 

Answer 2

Hier ist der Arbeitscode.

<span id="name">comment</span> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<div onclick="replacetext();">test</div> 

<script type="text/javascript"> 
    function replacetext(){ 
      $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() })); 
      $('#name').after('<input type="submit" />'); 
    } 
    </script> 

es als Antwort akzeptieren, wenn es

Answer 3

function replacetext() { 

    $("#name").replaceWith($('<textarea>').attr({ 
     id: 'name', 
     value: $('#name').text() 
    })); 
    $('#name').after('<button id="test">test</button>'); 
} 

$('#test').live("click",function(){ 
    alert("I am a newly-created element and .click won't work on me."); 

}); 

arbeitet Sie können nicht verwenden .append() in einem Textfeld, weil man nicht daran „Inhalt einfügen“ oder anhängen (es gibt auch andere Workarounds dafür). Sie können dies in DIV, Absatz-Tag oder was auch immer als Container dienen.

http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/ oder .on() http://api.jquery.com/on/

Answer 4

Eine weitere Option, die Sie Etiketten ersetzen lassen, die dynamisch erzeugt werden, nicht nur die eine mit dem statischen id = „Namen“ zum Beispiel:

html für ein Label oder ein Verankerungsglied in diesem Beispiel wird mit Textbox ersetzt:

<a href="#" onclick="editOpen(this);">@Html.DisplayFor(modelItem => Model.Name)</a>| 

Javascript (Innenseite der editOpen Funktion)

function editOpen(ctrl) { 
    //textbox 
    var editText = $('<input>').attr({ 
     type: 'text', 
     value: $(ctrl).text() 
    }); 

    //edit button 
    var saveEditLink = $('<input>').attr({value:'Save',type:'button'}); 

    //Put them together 
    $(ctrl).replaceWith($(editText).after($(saveEditLink))); 

} 

012.