イベントはEs6でテンプレートを追加した後でクリックします

Question

私はHTML要素を再利用するためにes6でテンプレートを使用しています。

マイテンプレートtemplate.js内側：

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

どのようにすることができます：今

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を持っています私はDOMに追加しているこれらの要素のクリックを割り当てますか？

Answer 1

最初に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); 
    } 
}