jQuery的位置（）調用

我使用這個插件飛出菜單：http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/jQuery的位置（）調用

按鈕就像是一個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和更換格「東西」與新的內容（這本身含有的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 
       }); 


      } 
     });

幾乎在那裏！

的問題是，當我點擊新建按鈕的Quickfire，它的工作原理，但菜單出現在我的屏幕的左上角，而不是旁邊的按鈕！

我試着打印出該公司的Quickfire按鈕的「位置」。對於初始負載之一，它說361 X 527的後續者，他們都說0×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 
       }); 


      } 
     }); 


    });

來源

2011-09-08 Nathan H

我試圖「分離」的按鈕的Quickfire更換權之前的內容，然後重新插入。現在它並沒有把菜單放在左上角，而是將菜單放在了我做ajax調用之前的位置（我想這很有道理）。不完全正確的位置，但至少在地理上更接近 –

您能鏈接到您看到此問題的頁面嗎？對jsfiddle（http://jsfiddle.net/6VrgD/3/）的初步測試表明，在你的代碼的其他地方可能有錯誤... – Chris

不幸的是，它住在我的電腦上，客戶不希望我分享許多。但我添加了一些代碼。 –

難道你使用fgmenu()代替只是menu()？（更新：你說你自己把菜單重命名爲fgmenu，所以它有可能調用$.fn.menu - 換句話說，衝突的jQuery UI函數 - 在內部......）

檢查控制檯錯誤，以防萬一有什麼明顯的內容。

我的下一個猜測是jQuery("#addMoreOptions").parent().parent()可能不是您期望的元素，實際上可能是<html>元素或其他類似的意外節點。

另一件事是，因爲你打電話$(something).parent().html("blah")意味着你要更換$(something)節點，它可能不會在隨後的調用中存在。

如果有更好的方法來定位並保持到目標節點的引用，我建議這樣做，而不是。

來源

2011-09-12 13:42:13 Chris

沒有這是故意的，我將菜單重命名爲fgmenu，因爲它與jquery-ui「自動完成」衝突 –

無法看到一個演示問題的工作示例，恐怕我對什麼可能沒有任何新的想法成爲問題：\ – Chris

我會去的簡單方法。剛剛得到的元素的位置的AJAX調用之前：

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

AJAX調用後應聘的職位爲新的元素：

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

另外，我不明白如果菜單位置：絕對的，或其他。檢查一下。希望我有用，歡呼，祝你好運！

來源

2011-09-19 00:00:14

如果元素在重新插入/重新連接後顯示在錯誤的位置，則需要檢查該對象的css。 Firebug是用於此目的的簡單工具，並且在處理CSS問題時爲我節省了無數個小時。當內容被讀取時，有兩件事發生了變化：

1）新內容的父容器已更改，因此菜單元素位置的上下文已更改。 2）菜單的CSS已經改變，也許從絕對到相對或繼承？

通常，在這種情況下最簡單的答案是正確的，但Firebug將是找到它的方法。您可以選擇任何元素來查看附加的CSS ...只需要找出更改。

http://getfirebug.com/layout

來源

2012-01-26 23:17:08 gdbj

jQuery的位置（）調用

回答

相關問題