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

在Es6中附加模板后单击事件

1 个答案: