Обработка событий нажатия jQuery внутри таблицы

Question

У меня есть таблица, которая содержит несколько строк, каждая из которых содержит одну кнопку и одно текстовое поле.

Какой самый простой способ вызвать предупреждение со значением текстового поля?

Answer 1

Вы можете привязать обработчик щелчка к кнопке, которая перемещается вверх по DOM к содержащему <tr>, а затем находит там текстовое поле:

// Bind a click handler to all buttons in the table...
$('table :button').click(function () {

  var text = $(this)    // "this" is the button which was clicked
    .closest('tr')      // find the <tr> which contains it...
    .find(':text')      // find the text box within that <tr>...
    .val();             // and get its value

  alert(text);
});

Answer 2

Если ввод текста и кнопка являются единственными двумя подряд (<tr>), то вы можете использовать обработчик событий, например так:

$('#table_id').delegate('a', function () {
    alert($(this).closest('tr').find('input[type="text"]').val());
});

Если кнопка является элементом формы, вы можете заменить селектор 'a' на 'input[type="button"]'.