7

私はインライン編集を実現したいコメント システムを持っています (誰かが良いプラグインまたは類似のものを知っている場合は、遠慮なく名前を付けてください)、テキストをテキストエリアとテキストに置き換える Javascript スニペットを見つけました。そのテキストエリアの値として。

しかし、ユーザーが編集したテキストを保存できるように、そのテキストエリアにボタン (送信ボタン) を追加する必要があります。

私のコードは次のようになります

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

でテストしました$("#name").append('<button>yes</button>');が、うまくいきませんでした。

4

4 に答える 4

2

このソリューションは、次の jsFiddle を使用して試すことができます: http://jsfiddle.net/adb8X/5/

あなたが望んでいると私が信じている行は次のとおりです。

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

上記のコードは、ターゲット セレクター ("#name") で指定された ID を持つ DOM 要素の直後に、新しく作成された DOM 要素 (yes) を挿入します。

詳細はinsertAfterこちら: http://api.jquery.com/insertAfter/

に挿入する場合はreplacetext()、次のようになります。

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>') );
于 2012-12-02T17:34:38.653 に答える
2 
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.");

});

「コンテンツを挿入」したり追加したりできないため、テキストエリアで .append() を使用することはできません (そのための他の回避策があります)。これは、DIV、段落タグ、またはコンテナーとして機能できるもので行うことができます。

http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/または .on() http://api.jquery.com /の上/

于 2012-12-02T17:18:11.483 に答える
1

これが作業コードです。

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

それが機能する場合は、回答として受け入れます

于 2012-12-02T16:54:54.030 に答える
1

たとえば、静的 id = "Name" を持つラベルだけでなく、動的に生成されたラベルを置き換えることができる別のオプション:

この例のラベルまたはアンカー リンクの 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)));

}
于 2012-12-02T18:49:10.773 に答える