将onclick事件添加到模板

debugcn 发表于 Dev

杰基

我有无法将事件onclick添加到我的元素的问题。如果我这样称呼它：

<td onclick="${console.log('bam')}">X</td>

事件被立即调用，因此我假设如果这样做，则：

<td onclick="${() => console.log('bam')}">X</td>

单击后可以使用，但是不幸的是，使用这样的代码它根本无法使用。有人知道如何解决吗？哦，我希望在没有jQuery的情况下实现它。整个代码：

this.device.error_log.map((el, i) => {
            if (el.message.component == "displays") {
                return (result += `
            <tr error_id="${i}">
             <td>
                ${this.device.error_log[i].message.component}
             </td>
             <td>
                ${this.device.error_log[i].message.info}
             </td>
             <button onclick="${() => console.log('bam)}">
                X
             </button>
            </tr>`);
            }
        });
    this.error_table.innerHTML += result

一定的表现

通常的想法是在函数内部创建元素，为它们分配事件处理程序，然后将它们附加到表中：

this.device.error_log.forEach((el, i) => {
  if (el.message.component == "displays") {
    const tr = document.createElement('tr');
    tr.setAttribute('error_id', i);
    tr.innerHTML = `
             <td>
                ${this.device.error_log[i].message.component}
             </td>
             <td>
                ${this.device.error_log[i].message.info}
             </td>
             <button>
                X
             </button>`;
    tr.querySelector('button').onclick = () => this.bam();
    this.error_table.appendChild(tr);
  }
});

请注意，仅.map在需要创建新阵列时才应使用。在这里，您想要执行副作用（更改DOM），因此应该使用它.forEach。

尽管可以改变周围的内容以使用内联处理程序，但内联处理程序通常被认为是非常差的做法-它们会导致脆弱的代码，需要全局污染，存在字符串转义问题，具有范围确定问题并且很奇怪with机制等等。最好显式附加侦听器。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。