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

更新：试试此代码：

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

您有多种此类错误。如果你修复它们，它应该可以工作。

Answer 4

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

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

将div附加到jquery中的div

4 个答案: