Question

//FIRST ARRAY OF DATA FROM SERVER: arrayOne = A:1,B:2,C:3.
//SECOND ARRAY OF DATA FROM SERVER: arrayOne = A:4,B:5,C:6.

//ajax success call back:

function (data) {
    var i = data.arrayOne.length - 1;
    var Parent = $('<div>',{'class':'parent'}).appendTo('body');
    var A = $('<h1>',{'class':'columns a','text':data.arrayOne[i].A}).appendTo('.parent');
    var B = $('<h1>',{'class':'columns b','text':data.arrayOne[i].B}).appendTo('.parent');
    var C = $('<h1>',{'class':'columns c','text':data.arrayOne[i].C}).appendTo('.parent');
}

//FIRST CALLBACK RETURNS: "123" appended as expected
//SECOND CALLBACK RETURNS: "123456 456" appended (expected output = 123 456).

在两个回调之后，来自第一个回调的“Parent”div附加了“123456”，来自第二个回调的“Parent”div附加了“456”。为什么会发生这种情况，如果我使用console.log而不是创建元素，则不会发生这种情况，因此它特别与正在创建的元素有关。

Chrome中的问题图片为清晰起见：http://oi57.tinypic.com/10ygfhx.jpg

（使用Node.js和Express）。

Answer 1

执行第二次回调时，页面上有两个<div class="parent"></div>。

您应该将.appendTo('.parent');更改为.appendTo(Parent); - 这样您就会引用新创建的div，而不是页面上的所有.parent div。

来自服务器的数组在ajax成功回调函数中导致奇怪的追加行为？

1 个答案: