Question

我正在尝试使用Rx.js observable-subscribe的一个非常基本的示例。这是我的代码：

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>

JS

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

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

但是，当我单击按钮时，控制台中没有任何内容。我错过了什么吗？

Answer 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

Answer 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);
    });
});

Rx.js可观察到的订阅-未捕获按钮单击

2 个答案: