Polymer dynamically created element not working (iron-scroll-threshold)

Question

I want to create notifications that feel like Facebook's. I use polymer and the elements: iron-dropdown , iron-list , iron-scroll-threshold . I want to create an iron-scroll-threshold element after the dropdown opens. When I create it first it will fire an event and start loading so I use it like this:

 <template>
        <iron-ajax
                id="ajax"
                url="some url"
                handle-as="json"
                on-response="_handleResponse">
        </iron-ajax>

        <paper-button class="status-bar-button" on-tap="open">
            <iron-icon icon="social:notifications-none"></iron-icon>
        </paper-button>

        <iron-dropdown id="dropdown"
                       vertical-align="[[verticalAlign]]"
                       horizontal-align="[[horizontalAlign]]"
                       disabled="[[disabled]]"
                       open-animation-config="[[openAnimationConfig]]"
                       close-animation-config="[[closeAnimationConfig]]"
                       horizontal-offset="[[horizontalOffset]]"
                       vertical-offset="[[verticalOffset]]">

            <div id="sidebar-apps-container" class="dropdown-content shadow-elevation-8dp">
                <div class="beeper" style="right:128px"></div>
                <div class="apps-body" id="scrollThresholdtarget">
                    <iron-list id="zoznam" items="[]" as="notifs" scroll-target="scrollThresholdtarget">
                        <template>
                            <a href="[[notifs.link]]" style="height: 150px">[[notifs.content]]</a><br/>
                        </template>
                    </iron-list>
                </div>
            </div>
        </iron-dropdown>

        <div id="forThreshold"></div>
    </template>

And the script goes like this:

open: function () {
    if (!this.scrollInitialised) {
        this.initScrollThreshold();
        this.scrollInitialised = true;
    }

    this.$.dropdown.open();
},

/**
 * @method
 */
initScrollThreshold: function () {
    var scrollThreshold = document.createElement('iron-scroll-threshold');
    scrollThreshold.setAttribute('id', 'threshold');
    scrollThreshold.setAttribute('on-lower-threshold', '_loadData');
    scrollThreshold.setAttribute('lower-threshold', '200');
    scrollThreshold.setAttribute('scroll-target', 'scrollThresholdtarget');
    this.$.forThreshold.appendChild(scrollThreshold);
    this._loadData();
},

/**
 * @method
 */
_handleResponse: function (event) {
    var data = event.detail.response;

    console.log(data);
    var elem = this.$.zoznam;

    data.forEach(function(notifs) {
        elem.push('items', notifs);
    });

    document.querySelector('#threshold').clearTriggers();
    console.log('fired');
},

/**
 * @method
 */
_loadData: function() {
    console.log('fired request');
    this.$.ajax.generateRequest();
}

But when elements are created it doesn't work. The event will never be fired.

Answer 1

Have you tried using addEventListener for the event you are trying to bind to via attributes? My guess is that isn't getting handled right (since Polymer doesnt support programmaticly binding things yet).