Perché questo è il codice più lento in 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 ();
    });
});

In Chrome è molto molto veloce !!

Ma in Fuoco quando il mouse entra per la prima volta nel ulbox occorrono da 1-2 sec finché inizia ad eseguire il codice.

Anche in Internet Explorer 7 funziona benissimo. La Li è passato il mouse rimane un po 'indietro, ma si inizia a eseguire immediatamente quando il mouse entra casella ul.

Answer 1

Sembra che tu abbia codice di assegnazione evento all'interno di un altro evento. Così ogni volta che l'evento 'MouseEnter' ha luogo si riassegnazione del 'hover' e 'fare clic su' eventi. È necessario collegare questi eventi, una volta al di fuori della funzione diretta ().

Non conosco la struttura delle pagine, quindi questo potrebbe non essere del tutto corretto. Ma lo fa illustrare il 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 ();      
});

Non sono del tutto sicuro di quello che sta succedendo nel codice, ma se la vostra intenzione era quella di fare in modo che gli eventi si attaccano a creato in modo dinamico elementi 'li', allora si avrebbe bisogno di utilizzare .Live () come avete fatto per 'MouseEnter'.

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

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

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

EDIT: Spiegazione di click () vs in diretta ()

Se ho un <div id='mydiv'></div> in HTML, quindi tutto quello che devo fare è assegnare i seguenti per collegare un evento click:

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

Ma se il div viene aggiunto dinamicamente al DOM, quindi posso usare dal vivo (), invece, e jQuery assegnerà automaticamente un evento ogni volta aggiungo dinamicamente l'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
});