Come sostituire e aggiungere con Javascript

Question

Ho un sistema di commenti in cui voglio realizzare la modifica in linea (quando qualcuno conosce un buon plugin o qualcosa di simile per favore non esitare a darmi un nome) e ho trovato uno snippet di Javascript che sostituisce il testo con una textarea e il testo come valore di quella textarea.

Ma ora ho bisogno di aggiungere un pulsante (pulsante di invio) a quella textarea in modo che l'utente possa salvare il testo che ha modificato.

Il mio codice appare ormai come

<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> 

ho provato fuori con $("#name").append('<button>yes</button>');, ma non ha funzionato.

Answer 1

La soluzione può essere provato utilizzando il seguente jsFiddle: http://jsfiddle.net/adb8X/5/

La linea che credo sono dopo è:

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

Il codice sopra inserisce un elemento DOM appena creato (si) subito dopo il DOM el ement con l'id specificato nel selettore di destinazione ("#nome").

più su insertAfter qui: http://api.jquery.com/insertAfter/

Se si desidera inserire nella replacetext(), diventerà:

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

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

} 

---

Nota: ho anche corretto il vostro jsFiddle. Si prega di controllare qui: http://jsfiddle.net/adb8X/5/ (ci sono stati problemi con le impostazioni e un piccolo refuso se ricordo male). La linea corrispondente che è:

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

Answer 2

Ecco il codice di lavoro.

<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> 

accettare come risposta se funziona

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."); 

}); 

Non è possibile utilizzare .Append() in una textarea perché non è possibile "inserire contenuti" o aggiungere ad essa (ci sono altri soluzioni alternative per questo). Puoi farlo in DIV, tag di paragrafo o qualsiasi altra cosa che possa fungere da contenitore.

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

Answer 4

Un'altra opzione che vi permetterà di sostituire le etichette che vengono generati in modo dinamico, non solo quello con la statica id = "Nome", per esempio:

html per un'etichetta o un tirante di ancoraggio in questo esempio per essere sostituito con testo:

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

JavaScript (all'interno della funzione editOpen)

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

}