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

我将此插件用于弹出菜单：

按钮位于一个div内，如下所示：

<div class="stuff">
some stuff
<a class="quickfire">menu</a>
</div>

其中.quickfire是链接的类名。到目前为止，一切顺利

但是，用户也可以触发一个AJAX调用，该调用将从服务器获取一堆HTML，并用新内容替换div“stuff”（它本身将包含一个quickfire链接）

正如预期的那样，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按钮的“位置”。对于初始荷载1，它表示为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
                });


            }
        });


    });

---

是否您正在使用

fgmenu（）

，而不仅仅是

menu（）

？（更新：您说您自己将函数从menu重命名为fgmenu，因此它可能正在调用

$.fn.menu

——换句话说，冲突的jQuery UI函数——在内部的位置……）

检查控制台是否有错误，以防有任何明显的错误

我的下一个猜测是

jQuery（“#addMoreOptions”）.parent（）.parent（）

可能不是您期望的元素，实际上可能是

元素或其他类似意外的节点

另一件事是，因为您正在调用

$（something）.parent（）.html（“blah”）

意味着您正在替换

$（something）

节点，该节点在后续调用中可能不存在

---

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

我会选择简单的方法。只需在AJAX调用之前获取元素的位置：

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

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

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

---

另外，我不明白菜单是位置：绝对还是其他什么。也要检查一下。希望我是有用的，干杯，祝你好运

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

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

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

---

在替换内容之前，我尝试“分离”quickfire按钮，然后重新插入。现在它没有把菜单放在左上角，而是把菜单放在我调用ajax之前的位置（我想这是有道理的）。不完全是正确的位置，但至少地理位置更近。您可以链接到您看到此问题的页面吗？对jsfiddle（）的初步测试表明，代码中的其他地方可能有错误……不幸的是，它存在于我的计算机上，客户端不希望我分享太多。但是我添加了一些代码。我通过在quickfire上调用“remove”来解决这个问题，然后手动重新插入它来编写jquery代码。您可以使用

.delegate（）

或

.live（）

来避免重新绑定新创建的

.quickfire

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

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

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