使用UUID作为主键时调用deleteBl函数触发语法错误的解决咨询

我有一个接收id作为参数的删除函数：

<script>
    function deleteBl(id){
        fetch('', {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({
                'id': id
            }),
            credentials: 'same-origin',
        })
    }
</script>

对应的Django模板代码：

{% for item in bl_query_set %}
<tr>
    <th scope="row">{{ forloop.counter }}</th>
    <td>{{ item.bl_number }}</td>
    <td class="text-center">{{ item.cargo_name }}</td>
    <td>{{ item.cargo_quantity }} {{ item.cargo_measurement }}</td>
    <td>
        <a onclick="deleteBl({{ item.id }})">
            <i class="fas fa-trash-alt"></i>
        </a>
    </td>
</tr>
{% endfor %}

使用默认自增ID作为主键时一切正常，但将主键改为UUID后，控制台抛出错误：Uncaught SyntaxError: Invalid or unexpected token。

UUID是字符串类型，模板渲染时直接输出{{ item.id }}会生成类似deleteBl(123e4567-e89b-12d3-a456-426614174000)的代码。JavaScript会把UUID中的-解析为减号，导致语法错误。而自增ID是数字类型，直接传入不会触发语法问题。

方法1：给UUID参数添加引号 #

修改模板中的onclick代码，将UUID用单引号包裹，确保JavaScript将其识别为字符串：

<a onclick="deleteBl('{{ item.id }}')">
    <i class="fas fa-trash-alt"></i>
</a>

渲染后会生成deleteBl('123e4567-e89b-12d3-a456-426614174000')，避免语法错误。

方法2：使用data属性+事件监听（更推荐） #

避免内联onclick事件，改用data-*属性存储UUID，通过事件监听处理删除逻辑，更符合现代前端开发规范：

修改Django模板 #

<td>
    <a class="delete-bl-btn" data-id="{{ item.id }}">
        <i class="fas fa-trash-alt"></i>
    </a>
</td>

修改JavaScript代码 #

<script>
    // 为所有删除按钮绑定点击事件
    document.querySelectorAll('.delete-bl-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            fetch('', {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    'id': id
                }),
                credentials: 'same-origin',
            })
        });
    });
</script>

这种方式不仅解决了字符串参数的问题，还避免了内联事件的安全隐患，代码结构更清晰。

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