Soy bastante nuevo en RxJS y necesito cambiar mi onClick s a myEvent s, tengo un problema en el que no puedo interactuar con los botones que se crean en el JS ya que no se crean en el HTML. El proyecto es una simple aplicación para tomar notas. ¡TIA! 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 = " "; })RxJS declarando todo en variables al inicio de su aplicación. Si cambia su oyente de origen dinámicamente, debe volver a crear la transmisión.
Por ejemplo:
const editbutton = new BehaviorSubject(yourInitHTMLButtonOrNull); editbutton.pipe(switchMap(buttonElement => fromEvent(buttonElement, "click"))).subscribe(() => {...}); Lo mismo para otros botones dinámicos. También debe cambiar estos botones como valores de Subject :
fromEvent(button, "click").subscribe(() => { i++; j++; ... editbutton.next(document.getElementById(i)); deletebutton.next(document.getElementById(i)); })