JS - 使用按钮插入行，按钮不起作用答案

【问题标题】：JS - Inserting row with button works, button does notJS - 使用按钮插入行，按钮不起作用
【发布时间】：2020-10-03 11:33:57
【问题描述】：

我有一个表格，用户可以在其中通过模式添加、编辑和删除行。使用此 JS 添加新行时：

        if (tit.innerHTML === "Add Account"){
          var type=document.getElementById("modal_type").value;
           var price=document.getElementById("modal_price").value;

           var table=document.getElementById(tableId);
           var table_len=(table.rows.length)-1;
           table.insertRow(table_len).outerHTML="<tr id='acc_row"+table_len+"'><td class='accname' id='acc_name"+table_len+"'>"+type+"</td><td class='accbal' id='acc_balance"+table_len+"'>"+price+"</td><td class='edtbutton' style='display: block'><button class='edit_account' data-modal-target='#modal' id='editaccounts' onclick='sayedit()'>✎</button></td></tr>";

           document.getElementById("modal_type").value="";
           document.getElementById("modal_price").value="";
       }

新行添加了正确的类、ID 等。但是添加的编辑按钮不起作用。我查看了开发人员模式，添加的编辑按钮与默认情况下的相同。这是单击编辑按钮时应该运行的函数：

const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll("[data-close-button]");
const overlay = document.getElementById("overlay");

openModalButtons.forEach(button => {
  button.addEventListener("click", () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

//Modal functionality

$(function () {
    // add click action to your edit buttons
    $('.edit_account').on('click', function(e){
        // get the parent table row
        row = e.target.parentElement.parentElement;

        // get cell data
        c = row.childNodes;
        name = c[0].textContent;
        amount = c[1].textContent;

        // populate modal with data from selected table row
        document.getElementById('modal_type').value = name;
        document.getElementById('modal_price').value = amount;

        // pass table row ID to the modal
        document.getElementById('row_num').value = row.getAttribute('id');
    });

知道我的错误在哪里吗？我尝试在添加的 html 中添加另一个 onclick，这会导致模式打开但它没有任何功能。

【问题讨论】：

标签： javascript

【解决方案1】：

您在 $('.edit_account').on('click', function(e){...} 运行之后添加按钮，因此它不会将事件侦听器添加到按钮。如果你想在新按钮上添加一个事件监听器，你应该在它创建之后进行。

【讨论】：

你能告诉我怎么做吗？我要添加新功能吗？
在 if 语句中，您可以在插入带有按钮的 HTML 后编写：document.getElementById('editaccounts').addEventListener('click', func) 和 fuc 将是您单击按钮时运行的函数
抱歉还是有点卡住了。对于 func 我会从上面粘贴 function(e){...} 吗？我也试过：.addEventListener("click", () => { const modal = document.querySelector(button.dataset.modalTarget) openModal(modal) })" 还是需要写一个新函数？
func 应该是单击具有上述 id 的按钮后要调用的函数。有什么错误？按钮的 ID editaccounts 是唯一的吗？
应该是函数名还是整个函数代码？我真的不明白。我在这里（一直在底部）用 eventlistener 做了一个 codepen：codepen.io/schinken82/pen/poyMezW ID“editaccounts”用于每一行中的一个编辑按钮和表格下方的一个添加按钮。他们应该都打开相同的模式，但有变化（例如模式标题）

【解决方案2】：

解决方案是寻址静态父元素。在这种情况下：

$('.acc_table').on('click', '.edit_account', function (e){

【讨论】：