动态创建图标点击后无法触发line-through切换功能求助

各位开发者好，我花了一整天尝试实现点击动态创建的图标来切换文字的删除线效果，但一直没成功，求帮忙。相关代码如下：

渲染Todo的JS代码 #

function renderTodos() {
    list.innerHTML = '';

     todos.forEach((todo, index) => {
     list.innerHTML += `
     <div class="todo" id=${index}>
     <i class= "fa  ${ todo.checked ? 'solid fa-check' : 'regular fa-square' }"  data-action="check" ></i>
     <p class= "text "${todo.checked ? 'linethrough' : ''}  data-action="check">${ todo.value }</p>
     < input type="text" class="edit-input hidden" value=${todo.value} />
     <i class='fas fa-ellipsis-v edit-task'  data-action="edit"></i>
     <i class="fa-solid fa-trash-can trash-btnn hidden " data-action="delete"></i>
    </div>

    `;
    });
    }

事件监听JS代码 #

document.body.addEventListener('click', (ev) => {
  const el = event.target;
  ev.preventDefault();
  if (el.classList.contains('fa-square')) {
    el.parentNode.querySelector('.text').classList.toggle('linethrough');
  }
});

运行上述代码时，删除线效果无法切换。补充测试代码片段：

.linethrough {
  text-decoration: line-through;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<div class="todo">
  <i class="fa regular fa-square" data-action="check"></i>
  <p class="text" data-action="check">todo value</p>
  <i class='fas fa-ellipsis-v edit-task' data-action="edit"></i>
  <i class="fa-solid fa-trash-can trash-btnn hidden " data-action="delete"></i>
</div>

问题分析与解决方案 #

1. 渲染代码的语法错误 #

渲染函数中<p>标签的class属性写法有误，引号位置错误导致linethrough类无法正确添加：
原代码：

<p class= "text "${todo.checked ? 'linethrough' : ''}  data-action="check">

修正后：

<p class="text ${todo.checked ? 'linethrough' : ''}" data-action="check">

2. 事件监听的逻辑缺陷 #

• 事件参数混用：函数参数是ev，但代码里用了event.target，应统一为ev.target
• 仅监听fa-square类：当图标切换为fa-check后，点击无法触发状态切换，应该通过data-action="check"来判断点击目标
• 未更新数据源：仅修改DOM类不会同步到todos数组，重新渲染后状态会丢失

修正后的完整代码 #

渲染函数

function renderTodos() {
    list.innerHTML = '';

    todos.forEach((todo, index) => {
        list.innerHTML += `
        <div class="todo" id="${index}">
            <i class="fa ${todo.checked ? 'solid fa-check' : 'regular fa-square'}" data-action="check"></i>
            <p class="text ${todo.checked ? 'linethrough' : ''}" data-action="check">${todo.value}</p>
            <input type="text" class="edit-input hidden" value="${todo.value}" />
            <i class='fas fa-ellipsis-v edit-task' data-action="edit"></i>
            <i class="fa-solid fa-trash-can trash-btnn hidden" data-action="delete"></i>
        </div>
        `;
    });
}

事件监听函数

document.body.addEventListener('click', (ev) => {
    ev.preventDefault();
    const el = ev.target;
    // 点击了带有check动作的元素（图标或文字）
    if (el.dataset.action === 'check') {
        const todoItem = el.closest('.todo');
        const index = parseInt(todoItem.id);
        // 切换todos数组中的checked状态
        todos[index].checked = !todos[index].checked;
        // 重新渲染Todo列表
        renderTodos();
    }
});

说明 #

• 修正了class属性的引号语法问题，确保linethrough类能正确应用
• 通过data-action="check"来判断点击目标，不管是图标还是文字都能触发状态切换
• 点击时更新todos数组的checked状态，再重新渲染列表，保证DOM状态和数据源同步

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