Свързване на събития в jQuery

Почти всяко JavaScript събитие има свой собствен jQuery метод. Например, кликването върху елементи може да се улови така: $(селектор).click(функция).

Нека разгледаме следния HTML код:

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

За него е написан CSS:

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

Нека направим така, че при кликване върху всяка li да се извежда удивителен знак. Кликнете върху точките от списъка:

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

Вътре във свързаната функция е достъпен this, който сочи към елемента, в който се е случило събитието (в нашия случай li, върху който е било кликнато). Този this може да се използва в стила на JavaScript, например this.innerHTML или в стила на jQuery - за това този this трябва да се увие в $, ето така: $(this).

Нека вземем HTML код:

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

Към този код са написани следните CSS стилове:

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

Нека направим така, че при кликване върху li в края й да се добавя '!'. За да проверите работата, кликнете върху точките от списъка:

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