セマンティックUIカレンダーをループ内で開く

Question

ループ内でSemantic-UI-Calendarを開く必要がありますが、何も動作しません。私はdata-id="expensecal"をクリックするとロジックが、それは私にexpense_date2またはexpense_date1あるidを与える必要がありますされているが、その代わり、それは私にinputのid与える：

Railsのビュー：

#---Loop----# 
<div class="required field"> 
    <label>Claim date</label> 
    <div class="ui calendar" data-id="expensecal" id="expense_date<%= contract.id %>"> 
    <div class="ui input left icon"> 
     <i class="calendar icon"></i> 
     <%= f.text_field :date, id: "expense_date_input", placeholder: "Expense date" %> 
    </div> 
    </div> 
</div> 

JavaScriptを：

$("[data-id=expensecal]").click(function(e) { 
    e.preventDefault(); 
    let id = '#' + e.target.id; 
    console.log(id); // Shows the field input id. Why? 
    $(id).calendar({ 
    type: 'date' 
    }); 
}); 

私はこのメソッドを使用して0を開きますはループしていますが、うまくいきますが、カレンダーではわかりません。

Answer 1

クラスを使用して準備ページですべての要素を初期化し、クリックイベントを削除

次のコードを使用してみてください：

$('.ui.calendar').calendar({ 
    type: 'date' 
    }); 

デモ：https://jsbin.com/kenaqiyuqe/1/edit?html,js,outputは