I am currently fetching content using Ajax, in the form of a json object, which is then displayed in the browser.
var stateSubjectSub = stateSubject.subscribe(function(data) {
console.log('state changes');
console.log(data);
var list = document.querySelector('#state .mdl-list');
if (list) {
document.getElementById('state').removeChild(list);
}
if (data.objectives && data.objectives.length > 0) {
document.getElementById('state').appendChild(h('ul.mdl-list',
data.objectives.map(function(item) {
return h('li.mdl-list__item.mdl-list__item-three-line', {
'data-type': 'objective'
},
h('span.mdl-list__item-primary-content',
h('span', item.title)
),
h('span.mdl-list__item-text-body', 'some stuff goes here'),
h('span.mdl-list__item-secondary-content',
h('a.mdl-list__item-secondary-action', {
href: '#'
}, h('i.material-icons.mdl-badge.mdl-badge--overlap', {
'data-badge': item.initiatives ? item.initiatives.length : 0
}, 'assistant_photo'))
)
);
})
));
}
state = data;
}, function(err) {
console.log(err);
});
The Ajax request has been successful, updating the state and constructing the DOM accordingly. Everything seems to be functioning as intended. The question at hand is how to subscribe to elements that do not exist during the document.ready event? I am looking for a way to attach an observer to elements that will appear in the future. How can this be achieved using RxJS? Specifically, I aim to add the observable to the ul -> li -> a element.
I have opted not to use jQuery or any similar libraries, preferring to work solely with RxJS.