При динамическом добавлении кнопки на таблицу невозможно добавить событие подтверждения по клику

Question

Я хочу создать таблицу с кнопкой отмены в каждой строке.При нажатии этой кнопки и до того, как логика сработает, я хочу добавить событие подтверждения.Я искал в Интернете и нашел сообщение, в которое можно добавить подтверждение, поставив onclick = 'return verify ("Cancel?");'в качестве атрибута внутри кнопки.Однако это не сработало, поскольку у меня проблема с escape-символом.

- 1-я попытка

tr.append("<td><input type='button' class='cancelBtn' onclick='return 
confirm('Cancel?');' value='CancelButton'/></td>");

- 2-я попытка

tr.append("<td><input type='button' class='cancelBtn' onclick='return 
confirm(\'Cancel?\');' value='CancelButton'/></td>");

Я пыталсяпоставить escape-символ, но он все еще не работал.Я проверял кнопку на инструменте разработчика в Chrome, и результаты обеих попыток совпадают.

Answer 1

Вы можете использовать backticks (строки шаблона ES6).Также лучше использовать посредническую функцию для обработки клика и confirm.

function handleClick() {
  return confirm("Cancel?");
}

let tr = $("#tr");

tr.append(`<td><input type='button' class='cancelBtn' onclick='handleClick();' value='CancelButton'/></td>`);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table>
  <tr id="tr"></tr>
</table>

Вы также можете просто использовать confirm и избегать return:

let tr = $("#tr");

tr.append(`<td><input type='button' class='cancelBtn' onclick='confirm("Cancel?");' value='CancelButton'/></td>`);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table>
  <tr id="tr"></tr>
</table>