Svelte中DOM更新后on:click指令失效问题求助

你直接在模板字符串中用${send_random}绑定事件的写法是错误的——模板字符串会把函数对象转换成它的字符串形式（比如function send_random() { ... }），最终生成的HTML里事件属性会变成无效语法，自然无法触发函数。

以下是几种正确的解决方式：

方式一：用DOM API创建元素并绑定事件（推荐） #

这种方式避开了字符串拼接的问题，能确保事件绑定准确，还能避免作用域冲突：

// 假设你有一个容器元素用来挂载生成的内容
const container = document.getElementById('your-container-id');

for (let i = 0; i < items.length; i++) {
    // 创建各层级DOM元素
    const blockDiv = document.createElement('div');
    blockDiv.className = 'block received';

    const textSpan = document.createElement('span');
    textSpan.className = 'item-text';

    const submitBtn = document.createElement('button');
    submitBtn.type = 'submit';
    submitBtn.textContent = items[i]['text'];

    // 绑定点击事件
    submitBtn.addEventListener('click', send_random);

    // 组装元素结构并挂载到容器
    textSpan.appendChild(submitBtn);
    blockDiv.appendChild(textSpan);
    container.appendChild(blockDiv);
}

方式二：用innerHTML拼接函数调用字符串（不推荐，有作用域风险） #

如果坚持要用模板字符串拼接HTML，需要把事件写成函数调用的字符串形式，同时确保send_random处于全局作用域：

// 确保函数在全局作用域（若原本不是）
window.send_random = send_random;

const container = document.getElementById('your-container-id');
let data = '';
for (let i = 0; i < items.length; i++) {
    data += `
        <div class="block received">
            <span class="item-text">
                <button type="submit" onclick="send_random()">
                    ${items[i]['text']}
                </button>
            </span>
        </div>
    `;
}
container.innerHTML = data;

注意：如果你的代码基于前端框架（比如用到on:click指令的Svelte），动态拼接的HTML字符串不会被框架编译器处理，框架的事件指令无法生效，这种情况应该用框架提供的列表渲染语法生成元素，而非手动拼接字符串。

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