¿Por qué es el código más lento en Firefox?

Question

<input type="text" id="sShState" />
$('#sShState').liveSearch(); // A plug-in
// inside plug-in:
$this = $(this);

// On focus I add a dropdown box and add li's;

var obj = '<ul id="ddList"></ul>';
$this.after(obj);
$this.next('ul').html(li's);

$('#ddList').live('mouseenter', function(){
    var $li = $this.next('ul').children('li');
    $li.removeClass('hoverLi');
    $li.hover(function(e){
        $li.filter('[last]').removeAttr('last');
        $(this).addClass('hoverLi');
    },function() {
        $li.filter('.hoverLi').attr('last', true);
        $li.filter('.hoverLi').removeClass('hoverLi');
    });

    $li.click(function(){
        selectLi($(this));
        removeList ();
    });
});

En Chrome es muy muy rápido !!

Pero en Firefox cuando el ratón entra por primera vez sobre el ulbox tarda entre 1-2 segundos hasta que comience a ejecutar el código.

Incluso en Internet Explorer 7 funciona bien. El li cernía sigue siendo un poco más atrás, pero se inicia la ejecución de inmediato cuando el ratón entre en el cuadro ul.

Answer 1

Parece que tiene código de asignación evento dentro de otro evento. Así que cada vez que el evento 'MouseEnter' tiene lugar se re-asignación de la 'estacionario' y 'clic' eventos. Debe adjuntar esos eventos una vez fuera de la función en vivo ().

No sé su estructura de la página, por lo que esto puede no ser del todo correcta. Pero ilustra el problema.

$('#ddList').live('mouseenter', function(){ 
    var $li = $this.next('ul').children('li'); 
    $li.removeClass('hoverLi');         
});

$('#ddList li').hover(function(e){  
      // $(this).filter('[last]').removeAttr('last');
      $(this).addClass('hoverLi');
},function() { 
      // $(this).filter('.hoverLi').attr('last', true);
      $(this).filter('.hoverLi').removeClass('hoverLi');
});

$('#ddList li').click(function(){
      selectLi($(this));  removeList ();      
});

No estoy del todo seguro de lo que está pasando en su código, pero si su intención era asegurarse de que los acontecimientos se vinculan a creado dinámicamente elementos 'li', entonces usted tendría que usar .live () igual que lo hizo para 'MouseEnter'.

$('#ddList li').live('mouseover', function() {...

$('#ddList li').live('mouseout', function() {...

$('#ddList li').live('click', function() {...

EDIT: Explicación de clic () vs vivo ()

Si tengo un <div id='mydiv'></div> en HTML, entonces todo lo que necesita hacer es asignar el siguiente para conectar un evento de clic:

$('#mydiv').click(function() {
    // whatever I want to do on click
});

Pero si el div se añade dinámicamente al DOM, entonces puedo usar en vivo () en su lugar, y jQuery asignará automáticamente un evento cada vez que añadir dinámicamente el elemento.

$('#mydiv').live('click', function() {
    // whatever I want to do on click
    // jQuery takes care of assigning it to mydiv when dynamically added to DOM
});