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);
}

我在这里俯瞰什么吗？我确实有其他组件（纸张滑块）与事件监听器一起正常工作，但没有选项卡。

Answer 1

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

是否有特定的浏览器出现故障？

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

Answer 2

试试这个：

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

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

Answer 3

我这样做了，效果很好!!

在我的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 4

例如

聚合物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 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);
}

聚合物纸张标签点击事件？

5 个答案: