将div附加到jquery中的div

Question

$(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/

Answer 1

您正在创建一个字符串，然后尝试附加到它，就好像它存在于 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 )
   );
});

Answer 2

您正在对尚不存在的元素调用 .append(data)；它只是一个字符串。

我认为这也不是创建新元素的好方法。您应该使用document.createElement() 和element.appendChild() 或一些jquery 技术。

Answer 3

您在彼此之前切换以下内容。您不能附加到不存在的元素上。

var str = "<div id='replytopost"+ divid + "'></div>";
$("#container-" + itemId).append(str); // this has to be added first
$("#replytopost" + divid).append(data);

Answer 4

更新：试试这个代码：

    $(".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")

您有不止一个此类错误。如果你全部修复它们，它应该可以工作。