0 
$(function() {
    $(".commentbox .btnReply").click(function() {
        $(this).hide();
        var id = $(this).attr("id").split("-")[1]
        var strDiv = "<input type='text' class='txtCmnt' id='txtReply-" + id + "' /> <input type='button' class='btnSave' value='Save' id='btnSave-" + id + "' /> ";
        $("#container-" + id).html(strDiv);
    });
    var i = 1;
    $(".commentbox").on("click", ".btnSave", function() {
        var itemId = $(this).attr("id").split("-")[1]
        var txt = $(this).parent().find(".txtCmnt").val();
        var divid = itemId + "-" + i;

 i++;
            alert("i" + i);
        alert("replypostid" + divid);

        $.post("Handler/Topic.ashx", {
            reply: txt,
            id: itemId
        }, function(data) {
            alert(data);
            var str = "<div id='replytopost" + divid + "'></div>";
            $("#replytopost" + divid).append(data);

            $("#container-" + itemId).append(str);


        })

    });
});

事後関数から返されたデータを、別の div に追加される動的に作成された div に追加したいと考えています。

jsfiddle のリンクは http://jsfiddle.net/UGMkq/49/です。

alert(data) は正しい出力を出力していますが、データを含む div が追加されていません。

編集済み

最初の保存ボタンをクリックすると、replypostid1-1 が表示されます。次に、2 番目のボタンをクリックすると、代わりにreplypostid2-2が表示され、 replypostid2-1が表示されます

http://jsfiddle.net/UGMkq/50/

4

4 に答える 4

2

文字列を作成し、DOM に存在するかのように追加しようとしています。代わりに、これを試してください：

$("#container-" + itemId).append(
   $('<div/>')
      .attr('id', '#replytopost'+divid)
      .append( data )
);

編集

返信カウントを処理するために Javascript でカウンターを保持することに依存することは、良い解決策ではないと思います。ページが更新されると、そのカウンターは失われるかリセットされます。

このアプリがデータベース駆動型である場合、データベースから現在の応答の数を取得し、データの一貫性を向上させることができるはずです - それは ajax 呼び出しで返されます - おそらく json オブジェクトとして。これにより、JS でそのカウンターを保持およびインクリメントすることを回避できます。

$.post("Handler/Topic.ashx", { reply: txt, id: itemId }, function(data) {
   //Assuming a json object like { "id": 1, "text": "What ever data equals now" }
   var reply = JSON.parse( data );
   $("#container-" + itemId).append(
      $('<div/>')
         .attr('id', '#replytopost'+itemId+'_'+reply.id)
         .append( reply.text )
   );
});
于 2012-04-20T18:15:46.380 に答える
0

まだ存在しない要素で .append(data) を呼び出しています。それは単なる文字列です。

それも新しい要素を作成する良い方法だとは思いません。document.createElement()andelement.appendChild()または jquery テクニックを使用する必要があります。

于 2012-04-20T18:16:11.520 に答える
0

更新:このコードを試してください:

    $(".btnReply").on("click", function() {
    thisvar = $(this).parent()
input = $("<input>")
input.appendTo(thisvar)
$("<br>").appendTo(thisvar)
$("<input>")
.attr("type", "submit")
.appendTo(thisvar)
        .on("click", function() {
        //Handle POST stuff here
        val = input.val()
        $("<div>").addClass("txtCmnt").text(val).appendTo(thisvar)
        })
})​

問題は

var str = "<div id='replytopost"+ divid + "'></div>";
       $("#replytopost" + divid).append(data);

この div 要素を作成しても、DOM に自動的に追加されることはありません。したがって、divを取得しようとしている場合:

$("#replytopost" + divid)

それは失敗します。方法は次のとおりです。

// Create a div
    var str = $("<div>").attr("id", "replytopost"+divid)
//Access it
    str.append(data)
//Append it to anything
str.appendTo("body")

この種のエラーが複数あります。それらをすべて修正すれば、うまくいくはずです。

于 2012-04-20T18:18:00.617 に答える
0

以下を先に切り替えます。存在しない要素に追加することはできません。 

var str = "<div id='replytopost"+ divid + "'></div>";
$("#container-" + itemId).append(str); // this has to be added first
$("#replytopost" + divid).append(data);
于 2012-04-20T18:22:24.030 に答える