Question

我遇到了无法将事件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

Answer 1

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

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机制等等。最好显式附加侦听器。

Answer 2

您可以执行以下简单操作：

<table>
  <tr>
    <td onClick="javascript: console.log('test')">test</td>
  </tr>
</table>

或类似这样：

<table>
  <tr>
    <td onclick=`${console.log('test')}`>test</td> <!––  Notice the backtick -->
  </tr>
</table>

或者甚至更简单：

 <table>
   <tr>
     <td onClick="console.log('test')">test</td>
   </tr>
 </table>

将onclick事件添加到模板

2 个答案: