在javascript中，我创建了放在页面上的div。我得到最后添加元素的左上宽度高度以放置新元素。信息将保存到xml文件中，以便在重新加载页面时放置div。当我检索最后一个div的位置时，我得到的信息是从xml信息中放置div的信息。换句话说，在javascript中创建的div似乎还没有在DOM中。是否有一个我必须调用的函数才能更新DOM？
以下是我检索页面上最后一个div的信息的代码。
var last_top = $('.linkcard:last', $("#page")).position().top;
var last_left = $('.linkcard:last', $("#page")).position().left;
var last_height = $('.linkcard:last', $("#page")).height();
var last_width = $('.linkcard:last', $("#page")).width();
此代码在按钮的onClick事件中调用。它第一次工作并检索静态div的信息（从xml中检索的信息）。随后的时间，它不会检索正确的信息，因为它似乎不知道javascript中添加的div。我想，编写的代码会查看不知道新div的DOM的一部分。是对的吗？我该怎么做才能获得正确的信息？
修改
*完整的javascript功能*
function create_linkcard() {
// Create LinkCard id
var created_id_string = $.ajax({
url: "create_id.php",
type: "GET",
data: { },
cache: false,
async: false,
success: function (response) {
if (response != '')
{
/* alert(response); */
}
}
}).responseText;
var card_id = "c" + String(created_id_string);
// Create Linkcard, add toolbar, resize #page
$("#page").append('<div id="'+card_id+'" class="linkcard_init ui-widget-content" style="z-index: 9999;"></div>');
$('#'+card_id).append('<p class="linkcard_header editableText">C'+created_id_string+'</p>');
// Make edit box for LinkCard title
$('#'+card_id).append('<form id="frm_name" name="frm_name" class="editableToolbar frm_add_linkcard"> <input type="text" placeholder="Type a name..." name="linkcard_name" class="txt_form"> <a href="#" title="Save" class="save btn_form" onClick="save_name(\''+card_id+'\', this.form); "></a> <a href="#" title="Cancel" class="cancel btn_form" onClick="delete_linkcard('+'\''+card_id+'\''+');"></a> </form>');
// Add toolbar
$('#'+card_id).append('<div class="toolbar"> <a href="#" title="Options" class="ico_tools"></a> <a href="#" title="Delete" class="ico_delete" onClick="delete_linkcard('+'\''+card_id+'\''+');"></a> </div>');
// Add drag and drop box
$('#'+card_id).append('<div class="link_drop_box"></div>');
// Add scrolling buttons
$('#'+card_id).append('<div class="scrolling_prev" title="Previous"></div>');
$('#'+card_id).append('<div class="scrolling_next" title="Next"></div>');
// Add search tool and add link tool
$('#'+card_id).append('<div class="tools" > <a href="#" title="Add Link" class="ico_add" onClick="add_link('+'\''+card_id+'\''+');"></a> <a href="#" title="Search Links" class="ico_search" onClick="open_search('+'\''+card_id+'\''+');"></a> </div>');
// Add script for scrolling
$(document).ready(function($) {
$(".scrolling_prev", $('#'+card_id)).mousedown(function() {
startScrolling($(".link_drop_box", $('#'+card_id)), "-=50px");
}).mouseup(function() {
$(".link_drop_box", $('#'+card_id)).stop()
});
$(".scrolling_next", $('#'+card_id)).mousedown(function() {
startScrolling($(".link_drop_box", $('#'+card_id)), "+=50px");
}).mouseup(function() {
$(".link_drop_box", $('#'+card_id)).stop();
});
});
// Place new LinkCard
/* var last_top = parseInt($('.linkcard:last', $("#page")).position().top);
var last_left = parseInt($('.linkcard:last', $("#page")).position().left);
var last_otop = parseInt($('.linkcard:last', $("#page")).offset().top);
var last_oleft = parseInt($('.linkcard:last', $("#page")).offset().left);
var last_height = parseInt($('.linkcard:last', $("#page")).height());
var last_width = parseInt($('.linkcard:last', $("#page")).width()); */
var last_top = parseInt($("#page").children('.linkcard:last').position().top);
var last_left = parseInt($("#page").children('.linkcard:last').position().left);
var last_otop = parseInt($("#page").children('.linkcard:last').offset().top);
var last_oleft = parseInt($("#page").children('.linkcard:last').offset().left);
var last_height = parseInt($("#page").children('.linkcard:last').height());
var last_width = parseInt($("#page").children('.linkcard:last').width());
alert ('top '+last_top+' left '+last_left+' offset top '+last_otop+' offset left '+last_oleft);
var new_top = 0;
var new_left = 0;
/* if (last_left < 250) {
new_top = last_top - last_height - last_height;
new_left = last_left + last_width + 20;
}
else {
new_top = last_top - last_height + 20;
new_left = 0;
}*/
if (last_left < 250) {
new_top = last_top - last_height - last_height;
new_left = last_left + last_width + 20;
}
else {
new_top = last_top - last_height + 20;
new_left = 0;
}
// Define more LinkCard options
$('#'+card_id).css('width',350);
$('#'+card_id).css('height',250);
$('#'+card_id).css('top',new_top);
$('#'+card_id).css('left',new_left);
$('#'+card_id).resizable();
$('#'+card_id).draggable();
$('#'+card_id).draggable("option", "handle", '.linkcard_header');
$('#'+card_id+' p').editableText();
$('#'+card_id).draggable({ stop: function(event, ui) { update_linkcard_xml(card_id) } });
// Make droppable
$('div.link_drop_box', $('#'+card_id)).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
/* update_links_xml("card_id"); */
},
out: function( event, ui ) {
/* update_links_xml("card_id"); */
},
accept: ".link",
});
// Get LinkCard info for XML
linkcard_name = $('#'+card_id).children('.linkcard_header').text();
linkcard_top = $('#'+card_id).position().top;
linkcard_left = $('#'+card_id).position().left;
linkcard_width = $('#'+card_id).width();
linkcard_height = $('#'+card_id).height();
// Scroll LinkCard into view
linkcard_offset = $('#'+card_id).offset().top+40;
var scroll_top = parseInt(linkcard_top);
alert (linkcard_offset);
$('#matting').scrollTop(linkcard_offset);
// Make ajax call to update XML
$.ajax({
url: "add_node.php",
type: "POST",
data: { nodeid: card_id, name: linkcard_name, top: linkcard_top, left: linkcard_left, width: linkcard_width, height: linkcard_height },
cache: false,
success: function (response) {
if (response != '')
{
/* alert(response); */
}
}
});
}
答案 0 :(得分：0)
每次致电.append()后，DOM都会更新。我仍然不确定我是否完全理解你想要实现的目标，但这是我在你的代码中注意到的：
当您分配到last_*个变量时，您将从上一个<div>获取课程linkcard的信息。但是，使用create_linkcard()创建的新div没有linkcard类。相反，他们有班级linkcard_init。因此，您对create_linkcard()的下一次调用永远不会找到新的div，因为它没有您要定位的类。
如果您只是将班级名称linkcard_init更改为linkcard，您的代码将会失败，因为您的逻辑首先会附加新的div，然后才会查找{{1值。因此，最后一个值将分配您刚刚插入的 new div的顶部，左侧，宽度和高度，而不是之前的值。
我注意到您的代码以对服务器的同步调用开始。这可能会暂时冻结用户界面。这不是问题吗？