聚合物纸标签点击事件？

Question

Can't seem to get <paper-tabs> or <paper-tab> to fire click events. Funny thing is, if I just grab the element and register the event listener on Chrome's dev tools, it works fine. But not so in my app code:

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

Am I overlooking something here? I do have other components (paper-slider) working correctly with event listener, but not the tabs.

Answer 1

Worked when I tried it: http://jsbin.com/sohik/1/edit

Is there a particular browser that is failing?

Note that waiting for polymer-ready is only necessary when accessing custom api. Otherwise, the elements themselves can be located, and event listeners can be added successfully.

Answer 2

Try this:

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

Don't worry about trying to add an event listener after polymer is loaded - just use $(document).on(EVENT, TYPE, FUNCTION(){CODE});

Answer 3

I did this and it worked pretty well!!

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>

and in my app.js

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

That's it.

Answer 4

example

polymer 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

The following example works:

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