Javascriptを置き換えて追加する方法

Question

インライン編集を実現したいコメントシステムがあります（プラグインをよく知っている人や他に似たような人が私に名前をつけることを躊躇しないでください）、Javascriptスニペットを見つけましたテキストエリアとそのテキストエリアの値をテキストに置き換えます。

今は、編集したテキストを保存できるように、そのテキストエリアにボタン（送信ボタン）を追加する必要があります。

は私のコードは、私が$("#name").append('<button>yes</button>');でそれをテストしてみたが、それはうまくいきませんでした今

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

のように見えます。

Answer 1

ソリューションは、次のjsFiddleを使って試してみたことができます：私はあなたが後にしていると信じてhttp://jsfiddle.net/adb8X/5/

行は次のようになります。

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

上記のコードは、DOM elの直後に新しく作成されたDOM要素（yes）を挿入しますターゲットセレクタ（ "#name"）内の指定されたIDを持つement。ここinsertAfterの詳細

：あなたはreplacetext()に挿入したい場合はhttp://api.jquery.com/insertAfter/

、それはなります：

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

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

} 

---

注：私もあなたのjsFiddleを修正しました。ここで確認してください：http://jsfiddle.net/adb8X/5/（設定に問題があり、正しくリコールすれば小さなタイプミス）その内の対応する行は次のとおりです。

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

Answer 2

ここに作業コードがあります。

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

それはあなたが「コンテンツを挿入」またはそれに追加することはできませんので、あなたが他がある（テキストエリアに）（.append使用することはできません

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

}); 

を動作するかどうかの答えとして、それを受け入れますそれに対する回避策）。 DIV、段落タグ、またはコンテナとして機能することができるものであれば、これを行うことができます。

http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/または.on（）http://api.jquery.com/on/

Answer 4

あなたが動的に生成されたラベル、例えば静的ID =「名前」を持つだけではなく、1代わっます別のオプション：ラベルの

HTMLをテキストボックスで置き換えることには、この例でまたはアンカーリンク：

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

のJavascript（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))); 

}