RxJS -将onClicks(JS)更改为myEvents(RxJS)

Question

我对RxJS非常陌生，我需要将我的onClicks更改为myEvents，我遇到了一个问题，我无法与在JS中创建的按钮进行交互，因为它们不是在myEvent中创建的。该项目是一个简单的笔记应用程序。蒂娅！stackblitz:https://stackblitz.com/edit/js-w9lthb?file=index.html

fromEvent(button, "click").subscribe(() => {
    i++;
    j++;
    let NotesArea = document.getElementById("NoteArea").value;
    let Colour = document.getElementById("colours").value;
    NotesArray.push(NotesArea);

    document.getElementById("NotesCollection").innerHTML += ("<div id=\"Div"+ i +"\" > <button id=\""+ i +"\">Edit Note</button> <button id=\""+ i +"\">Delete Note</button><div id = \"Note"+ i +"\" > <p>" + NotesArea + "</p> </div></div>");
    document.getElementById(("Note"+i)).style.backgroundColor = Colour;

    const editbutton = document.getElementById(i);
    const deletebutton = document.getElementById(i);
})

fromEvent(editbutton, "click").subscribe(() => {
    j = id;
    document.getElementById("Note"+j).innerHTML += ("<textarea id=\"EditArea\" name=\"EditArea\" rows=\"3\" cols=\"30\"> </textarea> <button onclick=\"SubmitEdit(EditArea, i)\">Submit edit</button>");
    const submitbutton = document.getElementById(i);
})

fromEvent(submitbutton, "click").subscribe(() => {
    let varofAdd = val.value;
    NotesArray[i] = varofAdd;
    document.getElementById("Note"+j).innerHTML = ("<div id = \"Note"+ i +"\" > <p>" + varofAdd + "</p> </div>");
})

fromEvent(deletebutton, "click").subscribe(() => {
    let DivNum = id;
    console.log(DivNum);
    document.getElementById("Div" + DivNum).innerHTML = " ";
})

Answer 1

在应用程序启动时在变量中声明所有内容的RxJS。如果你动态地改变你的源监听器，你应该重新创建流。

例如：

const editbutton = new BehaviorSubject(yourInitHTMLButtonOrNull);

editbutton.pipe(switchMap(buttonElement => fromEvent(buttonElement, "click"))).subscribe(() => {...});

对于其他动态按钮也是如此。此外，您还应该将此按钮更改为Subject值：

fromEvent(button, "click").subscribe(() => {
    i++;
    j++;
    ...

    editbutton.next(document.getElementById(i));
    deletebutton.next(document.getElementById(i));
})