在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 };

现在，我有另一个负责视图的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);
  }
}