Próbowałem dowiedzieć się, jaka jest różnica między
$(document).on('click', '#id', function(){});
i
$('#id').on('click', function(){});
Nie udało mi się znaleźć żadnych informacji o tym, czy jest jakaś różnica między nimi, a jeśli tak, jaka może być ta różnica.
Czy ktoś może wyjaśnić, czy w ogóle jest jakaś różnica?
on(). Wystarczy trochę poczytać :)
Odpowiedzi:
Pierwszy przykład ilustruje delegowanie zdarzeń . Procedura obsługi zdarzenia jest powiązana z elementem znajdującym się wyżej w drzewie DOM (w tym przypadku document) i zostanie wykonana, gdy zdarzenie osiągnie ten element i pochodzi z elementu pasującego do selektora.
Jest to możliwe, ponieważ większość zdarzeń DOM wypływa w górę drzewa z punktu początkowego. Jeśli klikniesz #idelement, zostanie wygenerowane zdarzenie kliknięcia, które przejdzie przez wszystkie elementy przodków ( uwaga na marginesie: tak naprawdę wcześniej jest faza, zwana `` fazą przechwytywania '', kiedy zdarzenie schodzi w docelowy ). Możesz uchwycić wydarzenie na dowolnym z tych przodków.
Drugi przykład wiąże procedurę obsługi zdarzeń bezpośrednio z elementem. Zdarzenie nadal będzie bąbelkowe (chyba że zapobiegniesz temu w module obsługi), ale ponieważ moduł obsługi jest powiązany z celem, nie zobaczysz efektów tego procesu.
Delegując procedurę obsługi zdarzeń, można zapewnić, że zostanie ona wykonana dla elementów, które nie istniały w DOM w momencie wiązania. Jeśli Twój #idelement został utworzony po drugim przykładzie, program obsługi nigdy nie zostałby wykonany. Powiązanie z elementem, o którym wiesz, że znajduje się na pewno w DOM w momencie wykonywania, daje pewność, że procedura obsługi będzie faktycznie do czegoś dołączona i będzie mogła zostać wykonana w razie potrzeby później.
$(document).on('click', $('#id'), function()...jak mogę użyć $(this)odniesienia $('#id')? $(this)aktualnie odwołuje się document- co rozumiem.
Rozważ następujący kod
<ul id="myTask">
<li>Coding</li>
<li>Answering</li>
<li>Getting Paid</li>
</ul>
Oto różnica
// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
$(this).remove()
});
A co, jeśli ponownie dodamy myTask?
$('#myTask').append('<li>Answer this question on SO</li>');
Kliknięcie tego elementu myTask nie spowoduje usunięcia go z listy, ponieważ nie ma związanych z nim żadnych procedur obsługi zdarzeń. Gdybyśmy zamiast tego użyli .on, nowy element działałby bez dodatkowego wysiłku z naszej strony. Oto jak wyglądałaby wersja .on:
$('#myTask').on('click', 'li', function (event) {
$(event.target).remove()
});
Podsumowanie:
Różnica między .on()i .click()może polegać na tym, że .click()może nie działać, gdy elementy DOM powiązane ze .click()zdarzeniem są dodawane dynamicznie w późniejszym czasie, podczas gdy .on()może być używane w sytuacjach, gdy elementy DOM powiązane z .on()wywołaniem mogą być generowane dynamicznie w późniejszym czasie.