Vázání událostí v jQuery

Téměř každé události JavaScriptu odpovídá svá vlastní metoda jQuery. Například, kliknutí na prvky lze zachytit takto: $(selektor).click(funkce).

Podívejme se na následující HTML kód:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Pro něj je napsáno CSS:

cssli {
  width: 100px;
  cursor: pointer;
}

Udělejme tak, aby po kliknutí na jakýkoli li se vypsal vykřičník. Klikněte na položky seznamu:

javascript$('li').click(function() {
  alert('!');
});

Uvnitř navázané funkce je dostupný this, odkazující na ten prvek, ve kterém došlo k události (v našem případě na li, na kterou bylo kliknuto). Tento this lze použít ve stylu JavaScriptu, například this.innerHTML nebo ve stylu jQuery - pro to je třeba tento this obalit do $, takto: $(this).

Vezměme HTML kód:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

K tomuto kódu jsou napsány následující CSS styly:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

Udělejme tak, aby po kliknutí na li se jí na konec přidal '!'. Pro ověření funkčnosti klikněte na položky seznamu:

javascript$('li').click(function() {
  $(this).append('!');
});