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“stuff”替换为新内容（其本身将包含quickfire链接）。

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

另外，我不明白菜单是位置：绝对还是其他。检查一下。希望我有用，欢呼和祝你好运！

Answer 2

您是否正在使用fgmenu()而不仅仅是menu()？（更新：你说你自己将这个功能从菜单重命名为fgmenu，所以有可能它正在调用$.fn.menu - 换句话说，有冲突的jQuery UI功能 - 在内部的地方......）

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

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

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

如果找到并保留对目标节点的引用有更好的方法，我建议改为。

Answer 3

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

1）新内容的父容器已更改，因此菜单元素位置的上下文已更改。 2）菜单的CSS已经改变，可能是从绝对到相对或继承？

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

http://getfirebug.com/layout

html（）调用后元素的jQuery位置

3 个答案: