Korzystanie z funkcji live() - korzyści - podobne do bind()

Question

Czy czytałem coś na temat wydarzenia na żywo jquery i jestem nadal trochę zdezorientowany? Jaka jest korzyść z jego używania?

http://docs.jquery.com/Events/live

wiem, że jest podobny do związania ale obu tych wydarzeń wciąż wydają się do mnie.

Poszukuję tylko wskazówek.

Answer 1

Ostrzeżenie: Ta odpowiedź jest stara. Nadal bardzo przydatny, ale live został wycofany i usunięty w nowszych wersjach jQuery. Więc przeczytaj odpowiedź, ponieważ przypadki użycia się nie zmieniły, a dowiesz się, dlaczego i kiedy używać mniej programów obsługi zdarzeń. Ale jeśli nadal używasz naprawdę starej wersji jQuery (v1.4.2 lub wcześniejszej), powinieneś rozważyć zapisanie nowego równoważnego kodu zamiast tego.Jak udokumentowano w jQuery API for live i skopiowane tutaj:

Przepisanie sposobu .live() pod względem jego następców jest prosta; Są to szablony dla równoważnych wezwań do wszystkich metod mocowania trzy zdarzenia:

1. $(selector).live(events, data, handler); // jQuery 1.3+
2. $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
3. $(document).on(events, selector, data, handler); // jQuery 1.7+

Czasami masz zestaw elementów podczas wczytywania strony, np. edytuj linki:

<table> 
    <tr> 
    <td>Item 1</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 2</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 3</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
</table> 

Teraz może masz coś takiego z jQuery:

$(document).ready(function() { 
    $('a.edit').click(function() { 
    // do something 
    return false; 
    }); 
}); 

Ale co, jeśli dodać nowy element do tej tabeli dynamicznie po stronie został początkowo załadowany?

$('table').append(' 
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr> 
'); 

Po kliknięciu przycisku "Edytuj" na tej nowej pozycji nic się nie stanie, ponieważ zdarzenia były związane podczas ładowania strony. Wejdź na żywo. Dzięki niemu można powiązać zdarzenie powyżej tak:

$(document).ready(function() { 
    $('a.edit').live('click', function() { 
    // do something 
    return false; 
    }); 
}); 

Teraz, jeśli dodać żadnych nowych <a> elementy z klasą edit po strona była początkowo załadowany, to nadal zarejestrować ten moduł obsługi zdarzeń.

Ale jak to się dokonało?

jQuery używa tak zwanej delegacji zdarzeń do osiągnięcia tej funkcji. Delegowanie zdarzeń jest pomocne w tej sytuacji lub gdy chcesz załadować dużą liczbę procedur obsługi. Załóżmy, że masz div z obrazów:

<div id="container"> 
    <img src="happy.jpg"> 
    <img src="sad.jpg"> 
    <img src="laugh.jpg"> 
    <img src="boring.jpg"> 
</div> 

ale zamiast 4 zdjęć, masz 100 lub 200, lub 1000. Chcesz powiązać zdarzenie click do obrazów tak, że X jest wykonywana czynność, gdy użytkownik kliknie na tym. Robiąc to, jak można się spodziewać ...

$('#container img').click(function() { 
    // do something 
}); 

... następnie zwiąże setki handlerów, które wykonają to samo! Jest to nieefektywne i może powodować niską wydajność w ciężkich aplikacjach internetowych. W przypadku delegowania zdarzeń, nawet jeśli nie planujesz później dodawać kolejnych zdjęć, użycie funkcji "na żywo" może być o wiele lepsze dla tego rodzaju sytuacji, ponieważ możesz następnie związać do kontenera jedną instrukcję obsługi i sprawdzić, kiedy kliknięcie zostanie kliknięte. był to obraz, a następnie wykonać działanie:

// to achieve the effect without live... 
$('#container').click(function(e) { 
    if($(e.target).is('img')) { 
     performAction(e.target); 
    } 
}); 

// or, with live: 
$('img', '#container').live('click', function() { 
    performAction(this); 
}); 

od jQuery wie, że nowe elementy mogą być dodane później lub że wydajność jest ważna, a nie wiążący zdarzenia do rzeczywistych obrazów, może dodać jeden do div jak w pierwszym przykładzie (w rzeczywistości jestem prawie pewien, że wiąże je do ciała, ale może do kontenera w powyższym przykładzie), a następnie delegować. Ta właściwość e.target może pozwolić jej sprawdzić po fakcie, czy zdarzenie, które zostało kliknięte/zastosowane, pasuje do selektora, który mógł zostać określony.

Aby było jasne: jest to pomocne nie tylko w sposób bezpośredni, ponieważ nie trzeba ponownie wiązać zdarzeń, ale może być znacznie szybsze w przypadku dużej liczby elementów.

Answer 2

Zasadniczo, z .live(), nie musisz zawracać sobie głowy aktualizowaniem programów obsługi zdarzeń, jeśli masz bardzo dynamiczną stronę internetową.

$('.hello').live('click', function() { 
    alert('Hello!'); 
}); 

To przykład zwiąże zdarzenie click do wszelkich elementów, które już posiadają klasę „Hello” jak również żadnych elementów, które są dynamicznie wstawiane, czy to przez AJAX lub przez stary sposób JavaScript.

Answer 3

Zaletą jest to, że procedura obsługi zdarzeń zostanie również dodana do nowych pasujących elementów podczas tworzenia tych elementów. Dzięki temu nie trzeba ręcznie dodawać obsługi zdarzeń za każdym razem, gdy tworzy się nowy element (pasujący do wcześniej używanego selektora), który tego potrzebuje.

Dodane w jQuery 1.3: Wiąże obsługi do zdarzenia (jak kliknięcie) dla wszystkich obecnego i przyszłego - - dopasowane elementem.

Od http://docs.jquery.com/Events/live#typefn, podkreślenie moje.