jQuery .live() no funciona

Question

mi problema real es que .live() el método jQuery no funciona.

Este šī el código donde lo uso:

jQuery.fn.sb_animateMenuItem = function() 
    { 
    var mousehoverColor = '#0089F7'; 
    var duration = 250; 

    return this.each(function() 
    { 
     var originalColor = $(this).css('background-color'); 
     $(this).live('mouseover', function() 
     { 
      this.style.cursor = 'pointer'; 
      $(this).animate().stop(); 
      $(this).animate(
      { 
       backgroundColor: mousehoverColor 
      }, duration); 
     }); 
     $(this).live('mouseout', function() 
     { 
      this.style.cursor = 'default'; 
      $(this).animate(
      { 
       backgroundColor: originalColor 
      }, duration); 
     }); 
    }); 
}; 

Esta cortó i se utiliza otra página de esta manera:

<script type="text/javascript" src="ui/js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="ui/js/jquery-ui-1.8.1.custom.min.js"></script> 
<script type="text/javascript" src="ui/js/color.js"></script> 
<script type="text/javascript" src="engine/js/tiny_mce/tiny_mce.js"></script> 
<script type="text/javascript" src="ui/js/ui.js"></script> 
<script type="text/javascript"> 
    // UI effects 
    $(document).ready(function() 
    { 
     $('button').sb_animateButton(); 
     $('input').sb_animateInput(); 
     $('.top_menu_item').sb_animateMenuItem(); 
     $('.top_menu_item_right').sb_animateMenuItem(); 
     $('.left_menu_item').sb_animateMenuItem(); 
    }); 
</script> 

Desde mi sitio utiliza peticiones AJAX i utiliza el método .live en el primer fragmento, pero cuando cargo la página, los efectos no se aplican, las etiquetas del botón/entrada ...

Si elimino el método .live y uso el modo "normal", se aplican los efectos de la interfaz de usuario definidos en el primer recorte pero solo los elementos cargados antes de cualquier solicitud de AJAX. Los elementos cargados después de la solicitud ajax no se ven afectados por el primer fragmento (aunque tienen el mismo selector).

Gracias por ayudarnos.

Answer 1

En resumen, no se puede utilizar .live() como este, es tiene que seguir una base de selección de algún tipo, esto es from the .live() docs: métodos de recorrido de

DOM no son totalmente compatibles para la búsqueda de elementos para enviar a .live(). Más bien, el método .live() siempre debe invocarse directamente después de un selector, como en el ejemplo anterior.

Estás llamando .live() en un objeto jQuery que representa un elemento DOM particular, en lugar que necesita para obtener los .selector los plugins ejecutando en, si hay uno, esto no está garantizado, por supuesto, a continuación, utilizar que.live para, de esta manera:

jQuery.fn.sb_animateMenuItem = function() { 
    $(this.selector).live(.....) 

Si se piensa en ello, ¿cómo .live() trabajo? Escucha si el evento burbujea, comprueba si el objetivo coincide con un selector, y se ejecuta si es así (y en un contexto, eso es un debate totalmente distinto) ... si lo hizo $(DOMElement).live(), ¿qué selector está comprobando para ver si debería ejecutar?

Creo que se puede argumentar basado en el elemento interno uuid este debe trabajo, pero por otra parte eso es sólo una .bind(), lo que sería menos derrochador, por lo .live() no hace nada por el estilo.

---

Actualización: porque tenía curiosidad acerca de la forma más fácil de poner en práctica esta sin repetir código, aquí es una versión de su plugin que elige .live() o .bind() dinámicamente, en base a si hay un selector presente para .live() a uso:

jQuery.fn.sb_animateMenuItem = function() { 
    var mousehoverColor = '#0089F7'; 
    var duration = 250; 
    var method = this.selector ? jQuery.fn.live : jQuery.fn.bind; 
    method.apply(this, ['mouseover', function() { 
    if(!jQuery.data(this, 'oColor')) 
     jQuery.data(this, 'oColor', jQuery(this).css('background-color')); 
    jQuery(this).stop(true).animate({ backgroundColor:mousehoverColor }, duration); 
    }]); 
    method.apply(this, ['mouseout', function() { 
    jQuery(this).animate({ backgroundColor:jQuery.data(this, 'oColor') }, duration); 
    }]); 
    return this.css('cursor', 'pointer'); 
}; 

You can view a working demo showing both here.

Answer 2

puede usar .DELEGATE() en lugar de .LIVE, .ON,.BIND

como

$("body").DELEGATE($(this),"click","myfunction") 

O

$("body").DELEGATE($(this),"click",function() { 
///code here 
})