RxDom: Update content of div recursive when an input is changed

I'm using Reactive Extension DOM for listening event from DOM. Currently I meet one problem: I have an input A and div B and div C. Changing input A will affect B, and changing content of B will change content of div C. So, it means: if I change input A, div B and div C will automatically change.

Currently I meet problem: when input A is changed, input B changed successfully but not C. I don't know because RxDom doesn't support changing recursive or because div doesn't have change event. Here is my short 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');
            });

Obviously I can listen to event of input A and then change C but that is not really the way I want and it looks like a workaround version. Because due to business, div C depends on div B rather than input A.

Rx will subscribe to the change event of the input. change event only triggers on actual user input but your value is changed programmatically.

Your problem is: You input into A by yourself, change of A is trigger -> subscription on A will be run -> B is changed programmatically -> change is not trigger on B -> subscription on B won't run :)

So solution for this is: when you change value of B, you trigger again change event manually. You also should note that you must do this on pure javascript, not on jquery. Here is an example code:

var event = new Event('change');
div_b_element.dispatchEvent(event);

Below code will not work. Because RxJS subscribes only to javascript native events, not jquery events. Be carefully because this will cost you long time for debugging.

$(div_b_element).trigger( "change" );