聚合物纸标签点击事件

Question

似乎无法让<paper-tabs>或<paper-tab>触发点击事件。有趣的是，如果我只是抓住元素并在Chrome的开发工具上注册事件监听器，它工作得很好。但在我的应用程序代码中不是这样的:

// app.html
<paper-tabs selected="0" class="bottom indent" style="width: 200px;" self-end>
    <paper-tab id="one">ONE</paper-tab>
    <paper-tab id="two">TWO</paper-tab>
</paper-tabs>
// app.js
window.addEventListener('polymer-ready', function(e) {
    var tabs = {
        one: document.querySelector('#one'),
        two: document.querySelector('#two')
    };
    tabs.one.addEventListener('click', function(e) {
        console.log(e, this);
    });
    // !! This logs the expected object !!
    console.log(tabs);
}

我是不是忽略了什么?我确实有其他组件(paper-slider)与事件侦听器正常工作，但不是制表符。

Answer 1

当我尝试时工作:http://jsbin.com/sohik/1/edit

是否有特定的浏览器失败?

请注意，等待polymer-ready只有在访问自定义api时才需要。否则，可以定位元素本身，并且可以成功添加事件侦听器。

Answer 2

试试这个:

$(document).on('click', 'paper-tab', function() {
//function code
});

不要担心在聚合物加载后尝试添加事件侦听器-只需使用$(document).on(EVENT, TYPE, FUNCTION(){CODE});

Answer 3

示例

聚合物v1.0

<dom-module id="example-cell">
   <div class="call-button" on-click="hello">
      example
   </div>
   Polymer({
        is: 'example-cell',
        hello: function(){
           alert("hi");
        }
</dom-module>

Answer 4

我这样做了，效果很好!

in my index.html

   <paper-tabs id="mainTab" selected="{{selectedtab}}" noink class="bottom flex" style="width= 300px;" on-iron-select="onTabSelect"> your tabs here   </paper-tabs>

和在我的app.js

app.onTabSelect = function(event, details){    
console.log(event.target.selected); };

就是这样。

Answer 5

示例如下:

Html:

<paper-tabs selected="{{aType}}">
    <template is="dom-repeat" items="[[activityTypes]]">
        <paper-tab on-tap="onAtSelect">[[item.name]]</paper-tab>
    </template>
</paper-tabs>

Javascript:

onAtSelect: function(e) {
    console.log(e.model.item);
}