html() 调用后元素的 jQuery 位置答案

【问题标题】：jQuery position of element after html() callhtml() 调用后元素的 jQuery 位置
【发布时间】：2011-09-08 15:44:10
【问题描述】：

我将这个插件用于飞出菜单：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 并将 div“东西”替换为新内容（其本身将包含一个快速链接）。

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
                });


            }
        });

快到了！

问题是，当我点击新创建的快速启动按钮时，它可以工作，但菜单出现在屏幕的左上角，而不是按钮旁边！

我试图打印出快速启动按钮的“位置”。对于初始加载，它说 361 x 527。对于后续加载，它们都说 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
                });


            }
        });


    });

【问题讨论】：

我尝试在替换内容之前“分离”快速启动按钮，然后重新插入。现在它没有把菜单放在左上角，而是把菜单放在我调用 ajax 之前的位置（我想这是有道理的）。位置不完全正确，但至少在地理位置上更接近
你能链接到你看到这个问题的页面吗？对 jsfiddle (jsfiddle.net/6VrgD/3) 的初步测试表明您的代码中的其他地方可能有问题...
不幸的是，它存在于我的计算机上，客户不希望我分享太多内容。但是我添加了一些代码。
我设法通过在 quickfire 上调用“remove”，然后手动重新插入它来编写 jquery 代码。
您能否使用.delegate() 或.live() 来避免重新绑定新创建的.quickfire？

标签： jquery jquery-ui events dom

【解决方案1】：

我会走简单的路。只需在 AJAX 调用之前获取元素的位置：

var x = $('#old-div').offset().left;
var y = $('#old-div').offset().top;

AJAX 调用后将位置应用到新元素：

$('#new-div').css({ "left" : x, "top" : y });

另外，我不明白菜单是 position: absolute 还是什么。也检查一下。希望我是有用的，干杯，祝你好运！

【讨论】：

【解决方案2】：

可能是您使用的是fgmenu() 而不仅仅是menu()？（更新：您说您自己将函数从 menu 重命名为 fgmenu，因此它可能正在调用 $.fn.menu - 换句话说，冲突的 jQuery UI 函数 - 在内部的地方......）

检查控制台是否有错误，以防万一有什么明显的地方。

我的下一个猜测是 jQuery("#addMoreOptions").parent().parent() 可能不是您期望的元素，实际上可能是 <html> 元素或其他类似的意外节点。

另一件事是，因为您正在调用 $(something).parent().html("blah") 意味着您正在替换 $(something) 节点，该节点在后续调用中可能不存在。

如果有更好的方法来定位和保留对预期节点的引用，我建议改为这样做。

【讨论】：

不是故意的，我将 menu 重命名为 fgmenu 因为它与 jquery-ui "autocomplete" 冲突
由于无法看到演示问题的工作示例，恐怕我对可能出现的问题没有任何新的想法：\

【解决方案3】：

如果元素在重新插入/重新附加后显示在错误的位置，那么您需要检查对象的 css。 Firebug 是用于此目的的简单工具，在处理 CSS 问题时为我节省了无数时间。在阅读内容时，有两件事发生了变化：

1) 新内容的父容器已更改，因此菜单元素位置的上下文已更改。 2）菜单的css发生了变化，可能从Absolute变成Relative或者Inherit？

通常，在这种情况下，最简单的答案是正确的，但 Firebug 将是找到它的方法。您可以选择任何带有它的元素来查看附加到它的 css...只需要找出更改即可。

http://getfirebug.com/layout

【讨论】：