Rx.js наблюдаемая подписка - нажатие кнопки не поймано

#rxjs #observable

#rxjs #наблюдаемый

Вопрос:

Я пытаюсь привести очень простой пример с Rx.js наблюдаемый-подпишитесь. Вот мой код:

HTML

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meter>
    <title></title>
</head>
<body>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>
<script  src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4 CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="index.js"></script>

<button id='testButton'>Click</button>

</body>
</html>

 var button = $('#testButton');
var btn$ = Rx.Observable.fromEvent(button, 'click');

btn$.subscribe(function(e){
    console.log(e);
});

Но в консоли ничего нет, когда я нажимаю кнопку. Я что-то пропустил?

Ответ №1:

fromEvent требуется, чтобы первым аргументом был элемент DOM. $ вероятно, относится к jQuery тому, который возвращает объект jQuery.

Таким образом, вы должны извлечь собственный элемент из button , прежде чем передавать его в fromEvent :

 var button = $('#testButton');
var btn$ = Rx.Observable.fromEvent(button[0], 'click'); // or .get(0) instead of [0]

Живая демонстрация: https://stackblitz.com/edit/rxjs-lpvsng?file=index.ts

1. Я попробовал это и получил ошибку после обновления браузера: Rx.js: 3642 Uncaught TypeError: недопустимая цель события в функции. FromEventObservable.setupSubscription (Rx.js:3642) в FromEventObservable. _subscribe (Rx.js:3664) в FromEventObservable . Наблюдаемый. _trySubscribe (Rx.js:893) в FromEventObservable . Observable.subscribe (Rx.js: 881) в index.js:35

2. Это работает для меня: stackblitz.com/edit/rxjs-lpvsng?file=index.ts

3. Да, и в вашей песочнице он даже работает без ‘[0]’ для кнопки. Похоже, это зависит от того, как загружаются скрипты — я просто тестирую это просто в браузере.

Ответ №2:

Я завернул свой JS-код в обработчик jquery ‘$ (document).ready ()’, и он начал работать:

 $( document ).ready(function() {    
    var button = $('#testButton');

    var btn$ = Rx.Observable.fromEvent(button, 'click');

    btn$.subscribe(function(e){
        console.log(e);
    });
});