Dart，将 onClick 事件添加到动态添加的元素答案

【问题标题】：Dart, adding onClick event to dynamically added elementsDart，将 onClick 事件添加到动态添加的元素
【发布时间】：2019-11-13 22:51:41
【问题描述】：

存在可以动态添加元素的页面，当前添加元素时也会添加点击事件。

//something triggers an element to be added
ButtonElement statusButton = ButtonElement();
statusButton.className = 'status';
statusButton.onClick.listen(doSomething);
div.children.add(statusButton);

这很好用，但我更愿意为所有未来元素添加单击事件。

我尝试了以下但没有成功。

ElementList<ButtonElement> statusButtons;
statusButtons = div.querySelectorAll('.status');
statusButtons.onClick.listen(doSomething);

如何使用 querySelectorAll 为动态添加的元素添加监听器？

我正在从 jquery 背景处理这个问题，所以在 Dart 中添加大量事件到单个元素的相同问题可能不是这样的问题，如果是这样，是否有推荐的方法来编写上述代码？我宁愿让听众分开。

【问题讨论】：

标签： dart dart-html

【解决方案1】：

你可以试试这样的：

void addClickEvents() {
  ElementList<ButtonElement> statusButtons = querySelectorAll('.status');

  for (ButtonElement button in statusButtons) {
    String dataListener = button.getAttribute('data-listener');

    if (dataListener != 'true') {
      button.setAttribute('data-listener', 'true');
      button.onClick.listen(printBtnName);
    }
  }
}

在 DartPad 上试用：https://dartpad.dartlang.org/9221358f0ca1e73acc9d5dfc770ba443

【讨论】：

2021 年使用 querySelector 的方式是什么？