делегирование событий с помощью jQuery 1.3.2

На данный момент я застрял в использовании jQuery 1.3.2 и только начинаю понимать делегирование событий в целом. Но я не могу заставить какое-либо делегирование событий работать с этим кодом. У меня есть ul с классом «чат», который при наведении курсора на один из его li должен создавать новый диапазон, который затем выскальзывает, а затем снова скользит, когда мышь покидает li.

Этот код работает, но я хочу использовать делегирование событий:

$('ul.chat li').hover(
    function() {
        $(this).append($('<span class="join">Join Conversation</span>'));
        setTimeout(function() {
            $('.join').animate({'width': '150px'}, 400);
        },500);
    },
    function() {
        $('.join').animate({'width': '0px'}, 200, function(){
            $(this).remove();                                             
        }); 
    }
);

Может ли кто-нибудь показать мне, как добиться того же результата, но с делегированием событий? Спасибо.


jquery event-delegation
person Ben    schedule 17.12.2010    source источник
comment
mouseenter и mouseleave не поддерживают всплытие/делегирование. jQuery.live не поддерживал hover в 1.3, пока они не добавили обходной путь в 1.4 (я думаю, они просто используют mouseover и mouseout)...   -  person bdukes    schedule 17.12.2010

Ответы (1)


arrow_upward
1
arrow_downward

ОБНОВЛЕНИЕ: не похоже, что вам нужно делегирование событий для добавленных элементов, а больше, потому что вы будете работать с очень большим набором результатов.

Быстрый поиск в Google («делегирование событий jquery 1.3.2») дал это.

Вы можете получить «делегирование события» с помощью события jQuery.live().

Вам придется разделить это на две привязки, например:

$('ul.chat li').live('mouseover',
    function() {
        $(this).append($('<span class="join">Join Conversation</span>'));
        setTimeout(function() {
            $('.join').animate({'width': '150px'}, 400);
        },500);
    }
).live('mouseout',
    function() {
        $('.join').animate({'width': '0px'}, 200, function(){
            $(this).remove();                                             
        }); 
    }
);
person Jeff Rupert    schedule 17.12.2010
comment
В jQuery 1.3.2 mouseenter и mouseleave не поддерживаются для live; их нужно заменить на mouseover и mouseout (api.jquery.com/live/#caveats) - person bdukes; 17.12.2010
comment
Ах. Я не был уверен, поэтому я просто использовал то, что в документах было обозначено как jQuery.hover(). Обновится через секунду. Спасибо! знак равно - person Jeff Rupert; 17.12.2010
comment
Моей главной заботой является сокращение количества возникающих привязок (думаю, я говорю это правильно). Мне старший программист сказал, что события привязываются к каждому li, даже когда в этом нет необходимости, когда можно привязать только к ul.chat. Он сказал, что я должен изучить делегирование событий. Делает ли это .live()? Или это просто позволяет зависать элементам списка, недавно введенным в ajax? - person Ben; 17.12.2010
comment
Я не думаю, что live() уменьшит количество привязок. Я помню, как пытался выполнить традиционное делегирование в привязках jQuery и обнаружил, что не могу эмулировать эту функциональность. В чем причина желания уменьшить количество привязок? Ваш сайт/приложение работает медленно, или вы беспокоитесь, что оно может начать замедляться, или...? - person Jeff Rupert; 17.12.2010
comment
Проблемы со скоростью. Я знаю, что это можно сделать, потому что другой парень делает это со своей командой, но я только что встретил этого парня где-то случайно и поэтому не могу просить его вдаваться в подробности. - person Ben; 17.12.2010
comment
Я не думаю, что это помогает, потому что он по-прежнему смотрит на каждый li, а не только на один ul. - person Ben; 19.12.2010
comment
В статье, которую я связал с моим последним обновлением, они поместили событие в table, а затем, если фактическая цель была td (и в этом случае имела класс nameCell), они запускают свое событие на нем, как и планировалось. - person Jeff Rupert; 19.12.2010
comment
Извините, мои глаза застряли на исходном ответе кода, и я только что увидел вашу ссылку. Это то, что я искал. Спасибо! - person Ben; 20.12.2010