jQuery позиция элемента после вызова html ()

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" новым контентом (который сам по себе будет содержать быстрый запуск).ссылка).

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


            }
        });

Как и ожидалось, ссылка быстрого огня больше не присоединяется к меню 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

Если элемент отображается в неправильном месте после повторной вставки / повторной установки, вам необходимо проверить CSS объекта. Firebug - простой в использовании инструмент для этой цели, и он сэкономил мне бесчисленные часы при работе с проблемами CSS. Когда содержимое читается, изменились две вещи:

1) изменился родительский контейнер для нового контента, и поэтому изменился контекст, в котором позиция элемента меню изменилась. 2) CSS меню изменился, возможно, с Абсолюта на Относительный или Наследственный?

Обычно самый простой ответ - это правильный ответ в этом случае, но Firebug поможет найти его. Вы можете выбрать любой элемент, чтобы увидеть прикрепленный к нему CSS ... просто нужно узнать об этом.

http://getfirebug.com/layout

Answer 3

Может быть, вы используете fgmenu() вместо menu()?(Обновление: вы сказали, что переименовали функцию из меню в fgmenu самостоятельно, поэтому вполне возможно, что она вызывает $.fn.menu - другими словами, конфликтующую функцию пользовательского интерфейса jQuery - внутренне местами ...)

Проверьте консоль на наличие ошибок, на случай, если там что-то очевидное.

Мое следующее предположение: jQuery("#addMoreOptions").parent().parent() может быть не тем элементом, который вы ожидаете, и фактически может быть <html>элемент или другой аналогичный неожиданный узел.

Другое дело, что поскольку вы звоните $(something).parent().html("blah"), это означает, что вы заменяете узел $(something), который может не существовать при последующих вызовах.

Если есть лучший способ найти и сохранить ссылку на предполагаемый узел, я бы предложил сделать это вместо этого.