Povezivanje događaja u jQuery

Skoro svakom JavaScript događaju odgovara svoja jQuery metoda. Na primer, klik na elemente može se uhvatiti ovako: $(selektor).click(funkcija).

Razmotrimo sledeći HTML kod:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>

Za njega je napisan CSS:

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

Hajde da napravimo da se klikom na bilo koji li ispisuje uzvičnik. Kliknite na stavke liste:

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

Unutar vezane funkcije dostupan je this, koji pokazuje na onaj element u kome se desio događaj (u našem slučaju na li, na koji je kliknuto). Ovaj this može se koristiti u stilu JavaScript-a, na primer, this.innerHTML ili u stilu jQuery - za to ovaj this treba obmotati u $, ovako: $(this).

Uzmimo HTML kod:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>

Za ovaj kod su napisani sledeći CSS stilovi:

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

Hajde da napravimo da se klikom na li njoj na kraj doda '!'. Da proverite rad kliknite na stavke liste:

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