调用jQuery ()后元素的html位置
我正在使用这个用于弹出菜单的插件：http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
按钮位于div中，如下所示：
<div class="stuff">
some stuff
<a class="quickfire">menu</a>
</div>我将它应用于一些链接，如下所示：
jQuery('.quickfire').menu({
content: jQuery('#search-engines').html(), // grab content from this page
showSpeed: 400
});其中.quickfire是链接的类名。到目前为止，一切都很顺利。
然而，用户也可以触发一个AJAX调用，该调用将从服务器获取一堆HTML，并用新内容(其本身将包含一个quickfire链接)替换div "stuff“。
jQuery.ajax({
url: 'ajax_file.php',
data: {
action: 'create_option_new_version',
id: jQuery('#qid').val(),
div: jQuery("#addMoreOptions").parent().parent().attr('id'),
cleanOutput: true
},
success: function(data, textStatus, jqXHR){
jQuery(".stuff").html(data);
}
});正如预期的那样，quickfire链接不再附加到jQuery菜单。所以，我每次都会再次链接它：
jQuery.ajax({
url: 'ajax_file.php',
data: {
action: 'create_option_new_version',
id: jQuery('#qid').val(),
div: jQuery("#addMoreOptions").parent().parent().attr('id'),
cleanOutput: true
},
success: function(data, textStatus, jqXHR){
jQuery(".stuff").html(data);
var position = jQuery('.quickfire').position();
console.log("left: " + position.left + " top: " + position.top);
jQuery('.quickfire').menu({
content: jQuery('#search-engines').html(), // grab content from this page
showSpeed: 400
});
}
});就快到了！
问题是，当我点击新创建的quickfire按钮时，它可以工作，但菜单出现在屏幕的左上角，而不是按钮旁边！
我试着把quickfire按钮的“位置”打印出来。对于初始负载，它是361x527。对于后面的代码，它们都是0 x 320
下面是真正的代码：
jQuery("#addMoreOptions").live('click',function(){
jQuery(".lastPollOptionInput").removeClass("lastPollOptionInput");
jQuery.ajax({
url: 'ajax_file.php',
data: {
action: 'create_option_new_version',
id: jQuery('#qid').val(),
div: jQuery("#addMoreOptions").parent().parent().attr('id'),
cleanOutput: true
},
success: function(data, textStatus, jqXHR){
jQuery("#addMoreOptions").parent().parent().html(data);
jQuery('.quickfire').fgmenu({
content: jQuery('#search-engines').html(), // grab content from this page
showSpeed: 400
});
}
});
});回答 3
Stack Overflow用户
发布于 2011-09-19 08:00:15
我会选择最简单的方式。只需在AJAX调用之前获取元素的位置：
var x = $('#old-div').offset().left;
var y = $('#old-div').offset().top;在AJAX调用之后，将位置应用于新元素：
$('#new-div').css({ "left" : x, "top" : y });另外，我不知道菜单是位置:绝对还是其他什么。也要检查这一点。希望我是有用的，干杯，祝你好运！
Stack Overflow用户
发布于 2011-09-12 21:42:14
会不会是因为你使用的是fgmenu()而不仅仅是menu()？(更新:您说您自己将函数从菜单重命名为fgmenu，因此它有可能在内部调用$.fn.menu --换句话说，冲突的jQuery UI函数...)
检查控制台中的错误，以防其中有明显的错误。
我的下一个猜测是，jQuery("#addMoreOptions").parent().parent()可能不是您期望的元素，实际上可能是<html>元素或其他类似的意外节点。
另一件事是，因为您正在调用$(something).parent().html("blah")，所以您将替换$(something)节点，该节点在后续调用中可能不存在。
如果有更好的方法来定位和保持对目标节点的引用，我会建议这样做。
Stack Overflow用户
发布于 2012-01-27 07:17:08
如果元素在重新插入/重新附加后显示在错误的位置，则需要检查对象的css。Firebug是一个很容易使用的工具，在处理CSS问题时，它为我节省了无数的时间。当内容被读取时，有两件事发生了变化：
1)新内容的父容器已更改，因此菜单元素位置的上下文也已更改。2)菜单的css已更改，可能从绝对更改为相对或继承？
通常，在这种情况下，最简单的答案是正确的on，但Firebug将是找到它的方法。您可以选择带有它的任何元素以查看附加到它的css ...只要找出变化就行了。
http://getfirebug.com/layout
https://stackoverflow.com/questions/7350826
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号