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

【问题标题】：RxJS - change onClicks(JS) to myEvents(RxJS)RxJS - 将 onClicks(JS) 更改为 myEvents(RxJS)
【发布时间】：2025-12-22 21:50:11
【问题描述】：

我对 RxJS 非常陌生，我需要将我的 onClicks 更改为 myEvents，我遇到了一个问题，我无法与在 JS 中创建的按钮进行交互，因为它们不是在 HTML 中创建。该项目是一个简单的笔记应用程序。蒂亚！ 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 = " ";
})

【问题讨论】：

你能创建一个上述的 stackblitz (stackblitz.com) 示例吗？人们会更容易提供帮助。

标签： javascript html rxjs

【解决方案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));
})

【讨论】：