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


        })

    });
});

我想将从 post 函数返回的数据附加到动态创建的 div 中，该 div 附加到另一个 div 中。

jsfiddle 链接是 http://jsfiddle.net/UGMkq/49/

alert(data) 正在打印正确的输出，但没有附加数据的 div。

已编辑

如果我点击第一个保存按钮，它会给出replypostid1-1，然后当我点击第二个按钮时，警报会给出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 回答