2011-09-08 30 views
7

Tôi đang sử dụng plugin này cho các menu fly-out: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/jQuery vị trí của nguyên tố sau html() gọi

Nút là bên trong một div như thế:

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

tôi áp dụng nó cho một số liên kết như vậy:

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

Where .quickfire là tên lớp của liên kết. Cho đến nay rất tốt, công trình.

Tuy nhiên người dùng cũng có thể kích hoạt cuộc gọi AJAX, sẽ tìm nạp một chuỗi HTML từ máy chủ và thay thế div "stuff" bằng nội dung mới (chính nó sẽ chứa liên kết nhanh).

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


      } 
     }); 

Như dự kiến, liên kết nhanh sẽ không còn được đính kèm vào Menu jQuery nữa. Vì vậy, tôi liên kết lại mỗi lần:

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


      } 
     }); 

Hầu như ở đó!

Vấn đề là, khi tôi nhấp vào nút quickfire mới tạo, nó hoạt động, nhưng menu xuất hiện ở góc trên bên trái của màn hình của tôi, thay vì bên cạnh nút!

Tôi đã cố gắng in "vị trí" của nút quickfire. Đối với một tải ban đầu, nó nói 361 x 527. Đối với những người tiếp theo, tất cả họ đều nói 0 x 320

Đây là mã thực:

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


      } 
     }); 


    }); 
+0

Tôi đã cố gắng "tháo" nút quickfire ngay trước khi thay thế nội dung, sau đó chèn lại. Bây giờ nó không đặt menu ở phía trên bên trái, thay vào đó nó đặt trình đơn chính xác nơi nó đã được trước khi tôi đã thực hiện cuộc gọi ajax (mà tôi đoán có ý nghĩa). Không chính xác vị trí chính xác, nhưng ít nhất là gần hơn rất nhiều về mặt địa lý –

+0

Bạn có thể liên kết đến trang nơi bạn đang gặp sự cố này không? Một thử nghiệm thô sơ trên jsfiddle (http://jsfiddle.net/6VrgD/3/) gợi ý rằng có thể có điều gì đó không đúng ở nơi khác trong mã của bạn ... – Chris

+0

Thật không may, nó sống trên máy tính của tôi và khách hàng không muốn tôi chia sẻ nhiều. Nhưng tôi đã thêm một số mã. –

Trả lời

0

Nó có thể được rằng bạn đang sử dụng fgmenu() thay của chỉ menu()? (Cập nhật: Bạn đã nói bạn đã đổi tên chức năng từ menu thành fgmenu cho mình, vì vậy có thể nó đang gọi $.fn.menu - nói cách khác, chức năng giao diện người dùng jQuery xung đột - nội bộ ở các địa điểm ...)

Kiểm tra bảng điều khiển cho lỗi, chỉ trong trường hợp có bất cứ điều gì rõ ràng trong đó.

Dự đoán tiếp theo của tôi là jQuery("#addMoreOptions").parent().parent() có thể không phải là yếu tố bạn mong đợi, và thực tế có thể là thành phần <html> hoặc một số nút không mong muốn tương tự khác.

Điều khác là bởi vì bạn đang gọi $(something).parent().html("blah") có nghĩa là bạn đang thay thế nút $(something), có thể không tồn tại trong các cuộc gọi tiếp theo.

Nếu có cách nào tốt hơn để định vị và giữ tham chiếu đến nút dự định, tôi sẽ đề xuất thực hiện việc đó thay thế.

+0

Không có mục đích gì, tôi đã đổi tên menu thành fgmenu vì nó xung đột với jquery-ui "tự động hoàn tất" –

+0

Nếu không thể xem ví dụ hoạt động thể hiện sự cố, tôi e rằng tôi không có bất kỳ ý tưởng mới nào về là vấn đề: \ – Chris

1

Tôi sẽ đi một cách dễ dàng. Chỉ cần có được vị trí của nguyên tố này trước khi cuộc gọi AJAX:

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

Sau khi cuộc gọi AJAX áp dụng vị trí để các yếu tố mới:

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

Ngoài ra, tôi không hiểu nếu menu là vị trí : tuyệt đối, hoặc bất cứ điều gì. Kiểm tra cho điều đó là tốt. Hy vọng tôi rất hữu ích, cổ vũ và chúc may mắn!

0

Nếu phần tử được hiển thị ở vị trí sai sau khi được lắp lại/lắp lại, thì bạn cần phải kiểm tra css của đối tượng. Firebug là một công cụ dễ sử dụng cho mục đích này, và đã tiết kiệm cho tôi vô số giờ khi làm việc với các vấn đề CSS. Khi nội dung đang được readded, hoặc hai điều đã thay đổi:

1) container mẹ cho nội dung mới đã thay đổi, và do đó bối cảnh trong vị trí của phần tử menu đã thay đổi như thế nào. 2) css của menu đã thay đổi, có lẽ từ Tuyệt đối đến Tương đối hoặc Kế thừa?

Thông thường, câu trả lời đơn giản nhất là chính xác trong trường hợp này, nhưng Firebug sẽ là cách để tìm nó. Bạn có thể chọn bất kỳ phần tử nào với nó để xem css gắn liền với nó ... chỉ cần tìm ra sự thay đổi.

Các vấn đề liên quan