Warum ist dieser Code langsamer 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 ist es sehr, sehr schnell !!

Aber in Firefox, wenn die Maus tritt zum ersten Mal über die ulbox es zwischen 1-2 sec dauert, bis er den Code auszuführen beginnt.

Auch in Internet Explorer 7 es funktioniert gut. Die hovered- li bleibt etwas hinter, aber es beginnt sofort mit der Ausführung, wenn die Maus des ul Feld eingeben.

Answer 1

Sie scheinen innerhalb eines anderen Ereignisses Ereigniszuordnung Code zu haben. Also, wenn die ‚MouseEnter-‘ Veranstaltung findet es erneut die Zuordnung der ‚schweben‘ und ‚klicken Sie auf‘ Ereignisse. Sie sollten diese Ereignisse einmal außerhalb der Live () Funktion befestigen.

Ich weiß nicht, Ihre Seitenstruktur, so dass dies möglicherweise nicht ganz korrekt. Aber es hat das Problem veranschaulichen.

$('#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 ();      
});

Ich bin mir nicht ganz sicher, was in Ihrem Code vor sich geht, aber wenn Sie Ihre Absicht, um sicherzustellen, war, dass die Ereignisse dynamisch erstellte Elemente ‚li‘ get an, dann würden Sie verwenden müssen .live (), wie sie tat 'MouseEnter-'.

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

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

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

EDIT: Erklärung der Taste () vs Live ()

Wenn ich einen <div id='mydiv'></div> in HTML haben, dann alles, was ich tun müssen, ist, zuweisen die folgenden ein Click-Ereignis verbinden:

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

Aber wenn die div dynamisch auf das DOM hinzugefügt wird, dann kann ich leben () statt, und jQuery wird automatisch ein Ereignis zuordnen, wenn ich das Element dynamisch hinzuzufügen.

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