聚合物 - 将事件绑定到动态创建的元素

我正在尝试创建一个聚合物组件，它将根据响应进行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('') 
    } 
    },

但“听”不起作用了，我找不到聚合物文档其他任何可能帮助我 - 无需在组件外去并在整个文档上调用直接的js，这不会很好......任何人都可以帮助我吗？

感谢，科尔姆

来源

2016-04-20 protos

会不会使用'DOM-repeat'使这个多很多更轻松？ – Alan

这会，如果我静态填充列表，但我使用js进行ajax调用，所以它需要动态构建。 – protos

您可以使用'iron-ajax'来进行ajax调用，并将结果绑定到一个属性，该属性与'dom-repeat'一起共享为'items'，并获得相同的动态结果，几乎不写入js（或者只是制作ajax用js调用并将结果设置为绑定到dom-repeat.items的属性） – Alan

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

来源

2016-04-20 15:34:42

Polymer [tip]（https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners ）：“通过触摸（移动）和点击（桌面）设备一致触发的事件，使用”on-tap“而不是”on-click“。”。所以，你应该听取“点击”而不是“点击”。 –

['Polymer.listen/unlisten']（https://www.polymer-project.org/1.0/api/#Polymer.Base:method-listen）的第三个参数必须是方法名（字符串），而不是一个函数ref。单击“li”时，您的示例会产生错误。 –

@ tony19非常感谢！ –

聚合物 - 将事件绑定到动态创建的元素

回答

相关问题