Как с помощью RxJs следить за контентом?

Question

[MuTaToRage]

Доброй ночи не спящим.
Есть стандартный шаблон. при нажатии на галочку появляется поле для редактирования. При нажатии отмена/галочка возвращается в изначальное состояние с новыми\старыми данными.
Так вот суть вопроса такова. Как сделать так что бы не делать в каждой функции unbind(click).bind(click,funName)?
Так как в момент нажатия на первую галочку она пропадает из контекста, то при её повторном появлении это уже новый элемент и его надо снова биндить на клик.

Answer 1

[Stalker_RED]

Делегирование же.

form.on('click', '.button42', function(){
   ...
})

то есть обработчик клика привязан к какому-то родителю, который никуда не исчезает. И при клике проверяется на каком из дочерних элементов произошло событие.

Comments

[MuTaToRage]

Очень понравилось решение.
получившийся код:

var source = Rx.Observable.fromEventPattern(
        function add(h) {
            $('.module-menu-items').bind('click', h);
        },
        function remove(h) {
            $('.module-menu-items').unbind('click', h);
        },
        (event)=>$(event.target)[0]
    ).subscribe(delegateClicks);

    function delegateClicks(element) {
        Rx.Observable.from(element.classList).subscribe(className=> {
            switch (className) {
                case 'edit':
                    return clickItemEdit(element);
                case 'cancel':
                    return clickItemCancel(element);
            }
        });
    }