CODEWITHSUNDEEP
javascriptevent-handlingpolymerdom-events
rodrigo-silveira
rodrigo-silveira

Reputation: 13078

Polymer paper-tabs click event?

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.

Upvotes: 2

Views: 5441

Answers (5)

yglodt
yglodt

Reputation: 14551

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

Upvotes: 0

Emerson Bottero
Emerson Bottero

Reputation: 338

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.

Upvotes: 0

kyunghwanjung
kyunghwanjung

Reputation: 510

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>

Upvotes: 0

Xarus
Xarus

Reputation: 6999

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

Upvotes: 0

Scott Miles
Scott Miles

Reputation: 11027

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.

Upvotes: 1

Related Questions