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

Question

[Алексей]

генерю структуру таблицы через JS(при помощи vue не вышло)
Проблема состоит в том что не понимаю как задать для button который генерится событие click
Так же встретил проблему в передаче пути к картинке, так как указанный в моем решении путь не является корректными браузер выдает label от этой картинки

// куда генерю
      <tbody id="tableMain">

        </tbody>

      </table>

//Что генерю
 let table = document.querySelector('#tableMain')
          table.innerHTML = ""
          this.farmDirecory.forEach((el => {
            let doc = `
            <tr id="doc_${el.id}">
            <td>${ el.number }</td>
            <td>${ el.company_status }</td>
            <td>${ el.created_at }</td>
            <td>${ el.department }</td>
            <td>${ el.contract_type }</td>
            <td>${ el.contract_object }</td>
            <td>${ el.fiat_amount }</td>
            <td>${ el.expiration_date }}</td>
            <td >${el.prolongation}</td>
            <td>${el.is_active}</td>
            <td>
             <a href="${el.scan}" target="_blank"><img style="height: 20px" src="@/assets/pdf.png" alt="скан"/></a>
            </td>
            <td>${ el.category }</td>
            <td>${ el.comment }</td>
            <td>${ el.counterparty?.work_name } </td>
            <td>${ el.counterparty?.short_name }</td>
            <td>${ el.counterparty?.full_name }</td>
            <td >${ el.counterparty?.els }</td>
            <td >${ el.counterparty?.ogrn }</td>
            <td>${ el.counterparty?.inn }</td>
            <td>${ el.counterparty?.kpp }</td>
            <td>${ el.counterparty?.legal_address }</td>
            <td>${ new Date(el.counterparty?.created_at).toLocaleString() }</td>
            <td>${ el.counterparty?.manager }</td>
            <td>${ el.counterparty?.phone }</td>
            <td>${ this.getGroupName(el.counterparty?.group) }</td> 
              </tr>`;
            table.insertAdjacentHTML('beforeend', doc)
    

if(el.annex != []){
  let annex_head = `<tr>
                  <th><button class="button Accept" style="height: 25px" onclick="console.log(${el.id})">Скрыть</button></th>
                  <th style="background: burlywood !important">Номер приложения</th>
                  <th style="background: burlywood !important">Тип приложения</th>
                  <th style="background: burlywood !important">Дата</th>
                  <th style="background: burlywood !important">Примечание</th>
                  <th style="background: burlywood !important">Скан-копия</th>
                  <th style="background: burlywood !important">Номер договора</th>
              </tr>`

            table.insertAdjacentHTML('beforeend', annex_head)
           el.annexes.forEach((a_el) => {
              let annex = `<tr id="annex_${a_el.id}">
                  <td style="border: none !important; font-style: italic">Приложение</td>
                  <td style="background: lightgrey !important">${ a_el.doc_type }</td>
                  <td style="background: lightgrey !important">${ a_el.number }</td>
                  <td style="background: lightgrey !important">${ new Date(a_el.created_at).toLocaleString() }</td>
                  <td style="background: lightgrey !important">${ a_el.comment }</td>
                  <td style="background: lightgrey !important">
                    <a href="${a_el.scan}" target="_blank"
                      ><img src="@/assets/excel.png"
                    /></a>
                  </td>
                  <td style="background: lightgrey !important">${ a_el.contract }</td>
               </tr>`;
               table.insertAdjacentHTML('beforeend', annex);
            })
...

Comments

[WapSter]

Жестко конечно, ничего не скажешь) Особенно та часть, где в таких задачах отказываются от vue который это делает более легче)

[Алексей]

WapSter, Не вышло создать такую структуру таблицы, поэтому пришлось обратиться к нативному JS

[WapSter]

Алексей, дели свою таблицу на компоненты. Вот тебе пример добавления событий к динамическим структурам https://codesandbox.io/s/intelligent-frog-998d7p?f...

[Алексей]

WapSter, Спасибо!

[ProjectSoft]

Алексей,
Ответ

[modelair]

о боже, куда столько кода? Упрощайте.

Answer 1

[Владимир Шаблий]

Посмотрите в сторону MutationObserver.

Answer 2

[Денис]

Используйте стандартное делегирование событий https://learn.javascript.ru/event-delegation

Answer 3

[alubochkin]

table.querySelector('button').addEventListener('click', () => {
    console.log('click')
})