时间戳

首页 > 解决方案 > Dart，将 onClick 事件添加到动态添加的元素

dart - Dart，将 onClick 事件添加到动态添加的元素

问题描述

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

//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 中添加大量事件到单个元素的问题可能不是这样的问题，如果是这样，是否有推荐的方法来编写上述代码？我宁愿让听众分开。

标签： dartdart-html

解决方案

你可以尝试这样的事情：

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

推荐阅读