Események kötése jQuery-ben

Szinte minden JavaScript eseményhez tartozik egy saját jQuery metódus. Például az elemekre kattintást így lehet elkapni: $(selector).click(függvény).

Nézzük a következő HTML kódot:

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

Ehhez a következő CSS van megadva:

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

Tegyük fel, hogy bármelyik li-re kattintáskor egy felkiáltójel jelenjen meg. Kattintsunk a lista elemekre:

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

A kötött függvényen belül elérhető a this, amely arra az elemre hivatkozik, ahol az esemény bekövetkezett (esetünkben az li-re, amire kattintottak). Ezt a this-t használhatjuk JavaScript stílusban, például this.innerHTML vagy jQuery stílusban - ehhez a this-t be kell csomagolni $-be, így: $(this).

Vegyük a következő HTML kódot:

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

Ehhez a kódhoz a következő CSS stílusok vannak megadva:

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

Tegyük fel, hogy amikor rákattintunk egy li-re, annak a végéhez adjunk hozzá egy '!'-t. A működés ellenőrzéséhez kattintsunk a lista elemekre:

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