Везивање догађаја у 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('!');
});