posición jQuery del elemento después de html() llamar

estoy usando este plugin para los menús de la mosca de salida: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/posición jQuery del elemento después de html() llamar

El botón se encuentra dentro de un div así:

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

estoy solicitando a algún enlace como el siguiente:

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

Donde .quickfire es el nombre de clase del enlace. Hasta ahora todo bien, funciona.

Sin embargo, el usuario también puede activar una llamada AJAX, que obtendrá un montón de HTML del servidor y reemplazará las "cosas" div con contenido nuevo (que a su vez contendrá un enlace rápido).

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


      } 
     });

Como era de esperar, el enlace quickfire ya no está adjunto al menú de jQuery. Así que lo vuelvo a vincular cada vez:

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


      } 
     });

Casi allí!

El problema es que, cuando hago clic en el botón Quickfire recién creado, funciona, pero el menú aparece en la esquina superior izquierda de mi pantalla, ¡en lugar de al lado del botón!

Intenté imprimir la "posición" del botón de encendido rápido. Para la carga inicial, se dijo 361 x 527. Para los siguientes, todos dicen 0 x 320

Este es el código real:

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


      } 
     }); 


    });

Fuente

2011-09-08 Nathan H

Me trataron de quickfire el botón "separar" derecho antes de cambiar el contenido, a continuación, volver a insertarlo. Ahora no coloca el menú en la parte superior izquierda, sino que coloca el menú exactamente donde estaba antes de que yo hiciera la llamada ajax (lo cual creo que tiene sentido). No exactamente la ubicación correcta, pero al menos mucho más cerca geográficamente –

¿Puede vincular a la página donde está viendo este problema? Una prueba rudimentaria en jsfiddle (http://jsfiddle.net/6VrgD/3/) sugiere que puede haber algo mal en otra parte de su código ... – Chris

Lamentablemente, no, vive en mi computadora y el cliente no quiere que comparta mucho. Pero agregué un código. –

Podría ser que usted está utilizando en su lugar fgmenu() de solo menu()? (Actualización: dijiste que cambiaste el nombre de la función del menú a fgmenu, por lo que es posible que llame al $.fn.menu; en otras palabras, la función JQuery UI en conflicto - internamente en lugares ...)

Comprueba la consola errores, por si acaso hay algo obvio allí.

Mi próxima conjetura sería que jQuery("#addMoreOptions").parent().parent() podría no ser el elemento que espera que sea, y de hecho podría ser el elemento <html> o algún otro nodo similar inesperado.

La otra cosa es que, como llama al $(something).parent().html("blah"), significa que está reemplazando el nodo $(something), que puede no existir en llamadas posteriores.

Si hay una mejor manera de localizar y mantener una referencia al nodo deseado, sugeriría hacerlo en su lugar.

Fuente

2011-09-12 13:42:13 Chris

No, eso es a propósito, cambié el menú a fgmenu porque estaba en conflicto con jquery-ui "autocompletar" –

Sin poder ver un ejemplo que demuestre el problema, me temo que no tengo nuevas ideas sobre lo que podría ser el problema: \ – Chris

Me gustaría ir por el camino más fácil. Acaba de obtener la posición del elemento antes de la llamada AJAX:

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

Después de la llamada AJAX aplicar el cargo al nuevo elemento:

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

Además, yo no entendía si el menú es la posición : absoluto, o lo que sea. Verifique eso también. Espero que haya sido útil, ¡salud y buena suerte!

Fuente

2011-09-19 00:00:14

Si el elemento se muestra en el lugar equivocado después de ser reinsertado/vuelto a conectar, entonces necesita verificar el css del objeto. Firebug es una herramienta fácil de usar para este propósito y me ha ahorrado innumerables horas al trabajar con problemas de CSS. Cuando el contenido se vuelve a listar, dos cosas han cambiado:

1) el contenedor principal para el nuevo contenido ha cambiado, y por eso el contexto de cómo ha cambiado la posición del elemento del menú. 2) ¿Ha cambiado el CSS del menú, quizás de Absoluto a Relativo o Heredado?

Por lo general, la respuesta más simple es la correcta en este caso, pero Firebug será la manera de encontrarlo. Puede seleccionar cualquier elemento con él para ver el CSS adjunto ... solo necesita descubrir el cambio.

http://getfirebug.com/layout

Fuente

2012-01-26 23:17:08 gdbj

posición jQuery del elemento después de html() llamar

Respuesta

Cuestiones relacionadas