动态创建按钮的事件监听器

Posted 2021-03-27

我有一个按钮，该按钮附加了包含几个div和按钮的模板。第一个按钮“ btnGenerateResult_0”工作正常，可能是因为页面加载时该按钮存在，而“ btnGenerateResult_1”已创建但不起作用。如何以及在何处修复事件侦听器并将其附加到这些按钮，我需要四个按钮？

下面的代码在document.readey函数（）中：

$(`#btnGenerateResult_${active}`).click(function () 
{
    var newrow = "";
    for (var i = 1; i < TablesObj[activeTableObj[active]].length; i ++ ) 
    {
            newrow = "";
            newrow= "<tr><td>"  +  TablesObj[activeTableObj[active]][i][0] +  
                    "</td><td>"  + TablesObj[activeTableObj[active]][i][3] + 
                    "</tr>";
            $(`#resultTableMain_${active}`).append(newrow); 
    }

}）;

答案

一个选项是在创建按钮之后将事件监听器添加到新创建的按钮中：

const container = document.getElementById('container');

function handleButtonClicked(e) {
   console.log(`Button ${ e.target.textContent } clicked!`);
}

Array.from(container.children).forEach((button) => {
  button.onclick = handleButtonClicked;
});

setTimeout(() => {
  const newButton = document.createElement('BUTTON');

  newButton.textContent = 'C';

  container.appendChild(newButton);
  
  // Add the event listener to this new button as well:
  newButton.onclick = handleButtonClicked;
}, 2000);

<div id="container">
  <button>A</button>
  <button>B</button>
</div>

以上是关于动态创建按钮的事件监听器的主要内容，如果未能解决你的问题，请参考以下文章

在同一个片段中实现多个事件监听器 - Android

片段内 Listview 中动态视图的 onClick 侦听器

将数据从片段发送到活动，无需任何事件处理或侦听器

IOC 控制反转Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 创建 事件监听器 对应的 动态代理 | 动态代理的数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )(代码片

表内的JS事件不会触发

在 for 循环中动态创建的按钮上的 addEventListener 问题