javascriptajaxrxjsrxjs-dom

RxDom: not working when new id created

I'm using Reactive Extension DOM for listening event from DOM. Here is my sample code: 

var input = document.getElementById('test_id');
var source = Rx.DOM.change(input);
var subscription = source.subscribe(
        function (x) {
          console.log(x);
        },
        function (err) {
          console.log('Error: ' + err);
        },
        function () {
          console.log('Completed');
        });

This code works when test_id is on page when document.ready finish. But I'm using AJAX request, so test_id just appears after a time when ajax request is sent and received on client. How can I make RxDom notify this.

Thanks.

Solution

  • You need to create the Observable again.

    When you call document.getElementById('test_id'); and the element with id test_id doesn't exist it returns null. Therefore there's no way to "refresh" source Observable because it doesn't even know what DOM element it should "refresh".

    So the only way is to create the Observable after you append HTML from your Ajax call.