javascript - 在 Es6 中添加模板后点击事件

Question

我在 es6 中使用模板来重用我的 HTML 元素。

我在 template.js 中的模板:

const checkbox = (id, name) => { 
    return `
        <div class="checkbox-group">
            <input class="checkbox-input-hidden" type="checkbox" name="index[]" value="${id}">
            <a href="#" class="form-field-input checkbox-custom-field">
                <span class="checkbox-label">${name}</span>
                <span class="icon-check"></span>
            </a>
        </div>`;
};

export { checkbox };

现在，我有另一个负责 View 的 js，它有一个呈现复选框的方法:

renderCheckbox (data) {
    for(var i in data) {
        this.checkboxContainer.append(
            checkbox(
                data[i].id, 
                data[i].name
            )
        );
    }
}

如何为我附加到 DOM 的这些元素分配点击？

Answer 1

您可以先通过将 HTML 字符串传递给 $ 创建一个 DOM 元素，然后为其分配一个事件监听器，然后将其附加到容器中。

$(checkbox(data[i].id, data[i].name))
  .click(() => {
    // ...
  })
  .appendTo(this.checkboxContainer);

顺便说一句，您可以通过将其更改为 for...of 来简化循环。并使用 destructuring .

renderCheckbox (data) {
  for (const {id, name} of data) {
    $(checkbox(id, name))
      .click(() => {
        // ...
      })
      .appendTo(this.checkboxContainer);
  }
}