В jQuery 1.3 команда представила метод live () , который позволяет нам привязывать обработчики событий к элементам на странице, а также к любым, которые могут быть созданы в будущем динамически. Хотя он и не идеален, он определенно оказался полезным. В частности, live () всплывает вверх и прикрепляет обработчик к документу. К сожалению, он перестает хорошо работать при вызове метода. Делегат () был представлен в версии 1.4, которая делает то же самое, но более эффективно.
Мы рассмотрим конкретные различия между двумя методами в сегодняшнем видео-кратком совете. Благодаря расширению FireQuery Firebug у нас будут инструменты, чтобы легче понять, как функционирует каждый метод.
Альтернативные параметры просмотра
|
1
2
3
|
<ul id=»items»>
<li> Click Me </li>
</ul>
|
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
// Bind attaches an event handler only to the elements
// that match a particular selector.
// excludes any dynamically generated elements.
$(«#items li»).click(function() {
$(this).parent().append(«<li>New Element</li>»);
});
// Live(), introduced in 1.3, allows for the binding
// of event handlers to all elements that match a
// selector, including those created in the future.
// It does this by attaching the handler to the document.
// Unfortunately, it does not work well with chaining.
// Don’t expect to chain live() after calls like
// children().next()…etc.
$(«li»).live(«click», function() {
$(this).parent().append(«<li>New Element</li>»);
});
// Delegate, new to version 1.4, perhaps should have been a complete
// replacement for Live().
// would have broken a lot of code!
// delegate remedies many of the short-comings
// found in live().
// directly to the context, rather than the document.
// It also doesn’t suffer from the chaining issues
// that live does.
// to using this method over live().
$(‘#items’).delegate(‘li’, ‘click’, function() {
$(this).parent().append(‘<li>New Element</li>’);
});
// By passing a DOM element as the context of our selector, we can make
// Live() behave (almost) the same way that delegate()
// does.
// the document — which is the default context.
// The code below is equivalent to the delegate() version
// shown above.
$(«li», $(«#items»)[0]).live(«click», function() {
$(this).parent().append(«<li>New Element</li>»);
});
|
Вывод
Это определенно может быть запутанной темой. Пожалуйста, не стесняйтесь задавать вопросы или обсуждать в комментариях. Большое спасибо Илия Мэнор за то, что он разъяснил мне несколько вещей на эту тему!