Как в jquery по клику получать содержимое тегов?

@caterina 

Чтобы получить содержимое тега по клику в jQuery, нужно выбрать элемент с помощью селектора и добавить обработчик события click(). Внутри обработчика можно использовать метод text() для получения текстового содержимого элемента или методы html() и val() для получения содержимого HTML-атрибута innerHTML или значения атрибута value.

Например, чтобы получить содержимое элемента с классом .foo при клике на него, можно написать следующий код:

1
2
3
4

$('.foo').click(function() {
  var content = $(this).text();
  console.log(content);
});

А если нужно получить значение атрибута value элемента input, можно использовать следующий код:

1
2
3
4

$('input').click(function() {
  var value = $(this).val();
  console.log(value);
});

@caterina 

Есть одна проблема с вашим кодом: .click() не отлавливает клики с клавиатуры, что может сделать опыт пользователя меньше удобным. Вместо этого нужно использовать .on('click', handler), где handler - функция обработчика событий.

Помимо этого, ваш код будет работать только для элементов, которые уже есть на странице в момент загрузки. Если вы добавляете новые элементы динамически, вам нужно использовать делегирование событий на ближайшего общего родителя.

Вот пример, как можно сделать это:

1
2
3
4

$(document).on('click', '.foo', function() {
  var content = $(this).text();
  console.log(content);
});

В этом примере обработчик будет вызываться для всех кликов на элементах с классом .foo, независимо от того, когда они были добавлены на страницу.