Search code examples
javascriptevent-handlingpolymerdom-events

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.


Solution

  • 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.