RxJS将原生onClick替换为myEvent时无法绑定JS动态生成按钮事件

问题核心原因 #

你当前的写法存在3个核心错误：

• 动态生成的edit、delete、submit按钮在你调用fromEvent绑定事件时还不存在于DOM树中，无法直接绑定
• editbutton、deletebutton等变量定义在新增笔记的订阅回调内部，外部作用域无法访问，绑定逻辑根本拿不到元素
• 你给同一条笔记的edit和delete按钮设置了相同的id，违反了DOM id唯一性规则，会导致元素获取错误

正确实现方案 #

采用事件委托方案，把所有动态元素的事件绑定在初始就存在的父容器#NotesCollection上，通过事件冒泡捕获目标元素的点击事件，再用RxJS操作符过滤出你需要的按钮事件即可。 #

步骤1：修改动态DOM生成逻辑 #

给动态按钮添加专属类名和自定义属性存储笔记ID，避免使用重复ID：

// 静态的新增笔记按钮直接绑定
fromEvent(document.getElementById('add-note-btn'), "click").subscribe(() => {
    i++;
    const NotesArea = document.getElementById("NoteArea").value;
    const Colour = document.getElementById("colours").value;
    NotesArray.push(NotesArea);

    // 给按钮加类名，用data属性存储笔记ID，保证ID唯一
    document.getElementById("NotesCollection").innerHTML += `
      <div id="Div${i}" class="note-item">
        <button class="edit-btn" data-note-id="${i}">Edit Note</button>
        <button class="delete-btn" data-note-id="${i}">Delete Note</button>
        <div id="Note${i}" class="note-content">
          <p>${NotesArea}</p>
        </div>
      </div>
    `;
    document.getElementById(`Note${i}`).style.backgroundColor = Colour;
})

步骤2：基于事件委托绑定动态按钮事件 #

统一将所有动态元素的点击事件绑定在已存在的父容器上，用RxJS操作符过滤目标事件：

import { filter, map } from 'rxjs/operators'

// 编辑按钮事件
fromEvent(document.getElementById('NotesCollection'), 'click')
  .pipe(
    // 过滤出编辑按钮的点击事件
    filter(e => e.target.classList.contains('edit-btn')),
    // 提取按钮绑定的笔记ID
    map(e => Number(e.target.dataset.noteId))
  )
  .subscribe(noteId => {
    const noteEl = document.getElementById(`Note${noteId}`);
    noteEl.innerHTML += `
      <textarea id="EditArea${noteId}" name="EditArea" rows="3" cols="30"></textarea>
      <button class="submit-btn" data-note-id="${noteId}">Submit edit</button>
    `;
  })

// 提交编辑按钮事件
fromEvent(document.getElementById('NotesCollection'), 'click')
  .pipe(
    filter(e => e.target.classList.contains('submit-btn')),
    map(e => Number(e.target.dataset.noteId))
  )
  .subscribe(noteId => {
    const editVal = document.getElementById(`EditArea${noteId}`).value;
    NotesArray[noteId] = editVal;
    document.getElementById(`Note${noteId}`).innerHTML = `<p>${editVal}</p>`;
  })

// 删除按钮事件
fromEvent(document.getElementById('NotesCollection'), 'click')
  .pipe(
    filter(e => e.target.classList.contains('delete-btn')),
    map(e => Number(e.target.dataset.noteId))
  )
  .subscribe(noteId => {
    document.getElementById(`Div${noteId}`).remove();
  })

额外优化建议 #

• 不要用innerHTML +=的方式追加DOM，该操作会重置父容器内所有现有元素的绑定事件，复杂交互场景下建议使用document.createElement创建元素后通过appendChild插入
• 所有订阅建议存储为变量，页面卸载时统一调用unsubscribe取消订阅，避免内存泄漏

内容的提问来源于stack exchange，提问作者luked123