jQuery开发求助：动态生成Todo列表项的复选框与删除按钮无法正常工作

代码核心问题说明 #

• 动态生成元素未使用正确的事件委托：页面加载完成后才插入的待办项、复选框、删除按钮，初始不存在于DOM中，直接绑定事件不会生效
• 事件委托的参数顺序错误：jQuery的on方法委托语法为$(静态父元素).on(事件类型, 动态子元素选择器, 回调)，原代码写反了绑定对象和目标选择器
• 类名大小写不匹配：按钮的类名是myButton，绑定事件时误写为mybutton，无法选中元素
• DOM操作逻辑错误：复选框修改颜色时选错了目标元素（改的是复选框自身而非待办文本），删除操作未找到所属的列表项元素

修复后完整代码 #

$(document).ready(function(){
  $('#add').click(() => {
    let listaInput = $('#szovegDoboz').val()
    // 可选：空值判断，避免添加空待办
    if(!listaInput.trim()) return
    $("ul").append(
      `<li>
          <span>
              <p class = "listaElem">${listaInput}</p>
              <p>
                  <button class = "myButton"><img src = "./content/del.svg" width = "20px" height = "20px"></button>
                  <input type = "checkbox"/>
              </p>
          </span>
      </li>`)
  })
  // 复选框事件委托给页面初始就存在的ul元素
  $('ul').on('change', 'input[type="checkbox"]', function() {
    // 找到当前复选框对应的待办文本元素
    const $todoText = $(this).closest('li').find('.listaElem')
    if (this.checked) {
      $todoText.css('color', 'gainsboro')
    } else {
      $todoText.css('color', 'dimgray')
    }
  })
  // 修正类名大小写，删除事件同样委托给ul
  $('ul').on('click', '.myButton', function() {
    // 找到当前按钮所属的li元素直接移除
    $(this).closest('li').remove()
  })
})

补充说明 #

如果你的<ul>元素也是动态生成的，可以把事件委托的父元素换成document，保证事件绑定一定生效。

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