Как установить событие клика для одного элемента?

Question

[Neuro]

При клике на чекбокс срабатывает событие на всех чекбоксах настранице, как этого можно избежать и событие работало только на том чекбоксе на который мы кликнули?

function onClickCheckboxRow(data) {
	$(".checkbox").change((e) => {
		console.log(data, e);
	});
}

function displayLine(data) {

	$('#results').append(`
	<tr>
		<th scope="row">${importLines.length}</th>
			<td><input class="checkbox" type="checkbox"></td>
			<td>${data[0]}</td>
			<td>${data[2]}</td>
			<td>${data[11]}</td>
			<td id="status-${data[0]}"><b><span style="color: orange">PENDING</span></b></td>
		</tr>
`, onClickCheckboxRow(data));
}

Answer 1

[0xD34F]

$('#results').on('change', 'tr', function(e) {
  console.log(e, $(this).data('xxx'));
});

function displayLine(data) {
  $('#results').append($(`
    <tr>
      <th scope="row">${importLines.length}</th>
      <td><input class="checkbox" type="checkbox"></td>
      <td>${data[0]}</td>
      <td>${data[2]}</td>
      <td>${data[11]}</td>
      <td id="status-${data[0]}"><b><span style="color: orange">PENDING</span></b></td>
    </tr>
  `).data('xxx', data));
}

Comments

[Neuro]

это не сильный костыль?)

[0xD34F]

Neuro, я без понятия, чего вы там пытаетесь сделать, так что о степени костыльности судить не возьмусь.

Answer 2

[Денис Грибанов]

function onClickCheckboxRow (data) {
  $('.checkbox').change((e) => {
    console.log(data, e)
  })
}

function displayLine (data) {
  $('#results').append(`
  <tr>
    <th scope="row">${importLines.length}</th>
      <td><input class="checkbox" type="checkbox"></td>
      <td>${data[0]}</td>
      <td>${data[2]}</td>
      <td>${data[11]}</td>
      <td id="status-${data[0]}"><b><span style="color: orange">PENDING</span></b></td>
    </tr> 
  `)
  onClickCheckboxRow(data)
}

Comments

[Stalker_RED]

Эм, ты просто повторил код из вопроса. В чем прикол?

[Денис Грибанов]

Да, извините, поспешил. Смысл в том, что бы вынести добавление обработчика клика из метода добавления строки. Грубо говоря, каждый раз добавляя одну строку, Вы вешаете новый обработчик на существующие.

Answer 3

[Stalker_RED]