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

Question

我正在使用此插件作为弹出菜单： 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
                });


            }
        });


    });

Answer 1

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

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

在 AJAX 调用之后，将位置应用于新元素：

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

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

Answer 2

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

检查控制台是否有错误，以防万一其中有任何明显的错误。

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

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

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

Answer 3

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

1）新内容的父容器发生了变化，因此菜单元素位置的上下文也发生了变化。
2）菜单的css发生了变化，也许从Absolute变为Relative或Inherit？

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

http://getfirebug.com/layout