jQuery position of element after html() call

Question

I am using this plugin for fly-out menus: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

The button is inside a div like that:

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

I am applying it to some link like so:

jQuery('.quickfire').menu({ 
        content: jQuery('#search-engines').html(), // grab content from this page
        showSpeed: 400 
    });

Where .quickfire is the class name of the link. So far so good, works.

However the user can also trigger an AJAX call, which will fetch a bunch of HTML from the server and replace the div "stuff" with new content (which itself will contain a quickfire link).

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


            }
        });

As expected, the quickfire link is no longer attached to the jQuery Menu. So, i'm linking it again every time:

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


            }
        });

Almost there!

The issue is that, when I click on the newly created quickfire button, it works, but the menu appears at the top left corner of my screen, instead of next to the button!

I tried to print out the "position" of the quickfire button. For the initial load one, it said 361 x 527. For the subsequent ones, they all say 0 x 320

Here is the real code:

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

I would go the easy way. Just get the position of the element before the AJAX call:

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

After the AJAX call apply the position to the new element:

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

Also, I didn't understand if the menu is position: absolute, or whatever. Check for that as well. Hope I was useful, cheers and good luck!