使用Fetch API时字符串ID删除报错问题求助

问题出在renderJob函数生成按钮的内联onclick代码里：

<button onclick="handleDeleteJob(${job.id})">Delete</button>

当job.id是字符串（比如b87b）时，生成的HTML会变成：

<button onclick="handleDeleteJob(b87b)">Delete</button>

浏览器会把b87b当成变量名去查找，但这个变量根本不存在，所以抛出ReferenceError。而数字ID会被直接解析成数值，因此能正常运行。

方案1：给字符串ID添加引号 #

修改renderJob里的按钮代码，把${job.id}用单引号包裹：

<button onclick="handleDeleteJob('${job.id}')">Delete</button>

生成的HTML会变成：

<button onclick="handleDeleteJob('b87b')">Delete</button>

此时b87b会被当作字符串参数传递，不会触发变量查找错误。

方案2：使用事件委托（推荐） #

内联onclick不利于代码维护和事件管理，更优雅的方式是用事件委托：

1. 移除内联onclick，给按钮添加data-id属性和统一类名：

const renderJob = (jobs) => {
    let html = jobs.map((job) => {
        return `
        <li class="job_item_${job.id}">
            <h4>${job.title}</h4>
            <p>I started this job from ${job.started_year}</p>
            <button data-id="${job.id}" class="delete-btn">Delete</button>
        </li>
        `;
    });
    listJobsBlock.innerHTML = html.join('')
};

2. 在start函数里给父元素添加点击事件监听：

const start = () => {
    getJobs(renderJob);
    handleCreateForm();
    // 事件委托处理删除逻辑
    listJobsBlock.addEventListener('click', (e) => {
        if (e.target.classList.contains('delete-btn')) {
            const id = e.target.dataset.id;
            handleDeleteJob(id);
        }
    });
};

这种方式无需担心ID类型，还能避免内联事件的诸多问题，代码更健壮。

你的createJob函数调用时未传入回调，创建新job后不会自动刷新列表，建议修改handleCreateForm里的调用：

createJob(formData, () => {
    getJobs(renderJob); // 创建成功后重新渲染列表
});

内容的提问来源于stack exchange，提问作者Thanh Bình