Povezovanje dogodkov v jQuery

Skoraj vsakemu dogodku JavaScript ustreza svoja metoda jQuery. Na primer, klik na elemente lahko ujamemo takole: $(selektor).click(funkcija).

Oglejmo si naslednjo HTML kodo:

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

Zanjo je definiran CSS:

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

Naredimo tako, da ob kliku na katerokoli li se izpiše klicaj. Kliknite na elemente seznama:

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

Znotraj povezane funkcije je na voljo this, ki se sklicuje na tisti element, v katerem se je zgodil dogodek (v našem primeru na li, na katero je bil klik). Ta this lahko uporabimo v slogu JavaScript, na primer this.innerHTML ali v slogu jQuery - za to je treba ta this oviti v $, takole: $(this).

Vzemimo HTML kodo:

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

Za to kodo so definirani naslednji CSS slogi:

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

Naredimo tako, da ob kliku na li se ji na konec doda '!'. Za preverbo delovanja kliknite na elemente seznama:

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