Jak zamienić i dołączyć do Javascriptu

Question

Mam system komentarzy, w którym chcę zrealizować wbudowaną edycję (gdy ktoś zna dobrą wtyczkę lub coś podobnego, proszę nie wahaj się podać mi imienia) i znalazł fragment kodu Javascript która zastępuje tekst tekstową a tekst jako wartość tego obszaru tekstowego.

Ale teraz muszę dodać przycisk (przycisk Wyślij) do tego obszaru tekstowego, aby użytkownik mógł zapisać edytowany tekst.

Mój kod wygląda teraz jak

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

Przetestowałem ją z $("#name").append('<button>yes</button>'); ale to nie działa.

Answer 1

Roztwór można wypróbować za pomocą następującego jsFiddle: http://jsfiddle.net/adb8X/5/

Linia Wierzę, że jesteś po tym:

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

Powyższy kod wstawia nowo utworzony element DOM (tak) zaraz po elemencie DOM z określonym identyfikatorem w selektorze celu ("#name").

Więcej o insertAfter tutaj: http://api.jquery.com/insertAfter/

Jeśli chcesz wstawić go do replacetext(), stanie się on:

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

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

} 

---

Uwaga: Ja też skorygować swoją jsFiddle. Proszę sprawdzić tutaj: http://jsfiddle.net/adb8X/5/ (Wystąpiły problemy z ustawieniami i małą literówką, jeśli dobrze pamiętam). Odpowiednia linia to:

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

Answer 2

Oto działający kod.

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

przyjąć to jako odpowiedź, czy to działa

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

}); 

Nie można używać .append() w textarea, ponieważ nie można „wstawić zawartość” lub dołączyć do niego (istnieją inne obejścia tego). Możesz to zrobić w DIV, znaczniku akapitu lub cokolwiek, co może działać jako pojemnik.

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

Answer 4

Innym rozwiązaniem, które pozwoli Ci zamienić etykiety, które są generowane dynamicznie, a nie tylko jeden z identyfikatorem statyczne = „name” na przykład:

html dla etykiet albo związek kotwicy w tym przykładzie można zastąpić tekstowego:

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

JavaScript (wewnątrz funkcji 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))); 

}