javascript - Polymer - 将事件绑定(bind)到动态创建的元素

Question

我正在尝试创建一个 polymer 组件，它将进行 ajax 调用并根据响应填充列表，我还想向每个列表元素添加一个点击/点击事件，以便在我点击时执行某些操作在列表项上。

我这样创建列表:

  populateList: function(items) {
    if (items.length == 0) {
      return;
    }
    var menu = this.$$('.mp-Autocomplete-dropdown-menu');
    var node = null;

    for (var k = 0; k < items.length; k++) {
      node = document.createElement('li');
      node.setAttribute('class', 'style-scope mp-autocomplete');
      node.setAttribute('tabindex', '0');

      node.innerHTML = items[k];
      menu.appendChild(node);
      this.listen(this.$$('li'), 'click', '_itemTapHandler');

      .addEventListener('')
    }
  },

但是“听”不起作用，我在 polymer 文档中找不到任何其他可能对我有帮助的东西——如果不走出组件并在完整文档上直接调用 js，那可不好。 ..... 谁能帮帮我？

谢谢， 冷

Answer 1

this.$$('li')总是返回第一个 <li>元素中的元素，这可能不是你想要的。

改用:

this.listen(node, 'click', '_itemTapHandler');

如果你想稍后删除它

var node = ... /* get reference to node */

this.unlisten(node, 'click', '_itemTapHandler');

另见 https://www.polymer-project.org/1.0/docs/devguide/events.html#imperative-listeners