Почему этот код работает медленнее в 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 ();
    });
});

В Chrome это очень, очень быстро!!

Но в Firefox, когда мышь впервые наведена на ulbox, требуется от 1-2 секунд, пока она не начнет выполнять код.

Даже в Internet Explorer 7 это работает нормально.Наведенный li остается немного позади, но он начинает выполняться сразу же, как только мышь попадает в поле ul.

Answer 1

Похоже, у вас есть код назначения события внутри другого события.Таким образом, всякий раз, когда происходит событие 'mouseenter', оно повторно назначает события 'hover' и 'click'.Вы должны прикрепить эти события один раз за пределами функции live().

Я не знаю структуру вашей страницы, так что это может быть не совсем корректно.Но это действительно иллюстрирует проблему.

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

Я не совсем уверен, что происходит в вашем коде, но если вы намеревались убедиться, что события привязываются к динамически создаваемым элементам 'li', то вам нужно было бы использовать .live(), как вы сделали для 'mouseenter' .

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

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

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

Редактировать:Объяснение click() vs live()

Если у меня есть <div id='mydiv'></div> в HTML все, что мне нужно сделать, это назначить следующее для прикрепления события click:

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

Но если div динамически добавляется в DOM, тогда я могу вместо этого использовать live(), и jQuery автоматически назначает событие всякий раз, когда я динамически добавляю элемент.

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