将div附加到jQuery中的div [英] appending div to a div in jquery

问题描述

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

I want to append data returned from post function to a dynamically created div which is appended to another div.

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

The jsfiddle link is http://jsfiddle.net/UGMkq/49/

alert(data)打印正确的输出，但是带有数据的div未附加.

alert(data) is printing correct output but div with data is not getting appended .

已编辑

如果我单击第一个保存按钮，它将给出replypostid1-1，然后 当我单击第二个按钮时，警报给出的是 replypostid2-2 ，而不是 replypostid2-1

If I click first save button it is giving replypostid1-1 and then when I click second button alert is giving replypostid2-2 instead I want replypostid2-1

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

推荐答案

您正在创建一个字符串，然后尝试将其追加，就好像它已存在于DOM中一样.相反，请尝试以下操作:

you are creating a string, then trying to append to it as if it existed in the DOM. Instead, try this:

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

修改

我不认为依靠Java脚本中的计数器来处理回复计数是一个很好的解决方案.如果刷新页面，该计数器将丢失/重置.

I don't think relying on keeping a counter in Javascript to handle the reply count is a good solution. If the page is refreshed, that counter is lost/reset.

如果该应用程序是数据库驱动的，则您应该能够从数据库中获取当前的回复计数，并具有更好的数据一致性-通过ajax调用将其传递回-可能作为json对象.这将使您避免在JS中保留和增加该计数器.

If this app is database driven, you should be able to get a count of current replies from the database and have better data consistency - have that passed back with the ajax call - maybe as a json object. This will allow you to avoid keeping and incrementing that counter in 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 )
   );
});

这篇关于将div附加到jQuery中的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！