追加div來一個div 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); 


     }) 

    }); 
});

我要追加數據從後功能恢復其附加到另一個DIV動態創建的股利。追加div來一個div jQuery中

的的jsfiddle鏈接 http://jsfiddle.net/UGMkq/49/

警報（數據）是打印正確的輸出，但分度數據是沒有得到追加。

編輯

如果我點擊第一個保存按鈕它給replypostid1-1然後當我點擊第二個按鈕警報給replypostid2-2，而不是我想replypostid2-1

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

來源

2012-04-20 coder25

什麼是Handler/Topic.ashx的完整url？我無法在jsfiddle上測試，因爲$ .post沒有從那裏執行 – user92254225 2012-04-20 18:15:48

它看起來像你還沒有添加'div'試圖選擇到DOM呢。您需要將'div'附加到DOM或將'data'附加到'str'變量，即$（str）.append（data）; – jasonmerino 2012-04-20 18:16:11

您正在創建一個字符串，然後嘗試追加到它，就好像它存在於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-20 18:15:46 kmfk

我已經更新了我的問題請查看it.thks你已經給出的代碼作品 – coder25 2012-04-20 19:03:17

@prerna - 爲你編輯的答案。我相信你可能會有更好的運氣來修改你的方法。 – kmfk 2012-04-20 20:27:41

你打電話.append尚不存在的元素（數據）;這只是一個字符串中的東西。

我不認爲這是創建新元素的好方法。你應該使用document.createElement()和element.appendChild()或jquery技術。

來源

2012-04-20 18:16:11 delicateLatticeworkFever

UPDATE：試試這個代碼：

$(".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-20 18:18:00

str.appendTo（「＃container-」+ itemId）;給出的錯誤： - 對象不支持這個屬性或方法 – coder25 2012-04-20 18:24:02

我重寫了你的代碼（沒有$ .post的東西）。它在上面。嘗試在這裏：http://jsfiddle.net/frp3z/ – 2012-04-20 18:41:31

確定它的工作原理，但我已經更新了我的問題請看看它 – coder25 2012-04-20 19:02:32

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

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

來源

2012-04-20 18:22:24

追加div來一個div jQuery中

回答

相關問題