Open Semantic UI Kalender innerhalb einer Schleife

Question

Ich muss Semantic-UI-Calendar innerhalb einer Schleife öffnen, aber nichts funktioniert, was es sollte. Die Logik ist, wenn ich data-id="expensecal" klicken, sollte es mir die id geben, die expense_date2 oder expense_date1 ist, aber es gibt mir stattdessen die id des input:

Rails Ausblick:

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

Ich benutze diese Methode, um eine 0 zu öffnenin einer Schleife und es funktioniert in Ordnung, aber nicht sicher, warum nicht mit dem Kalender.

Answer 1

initialisieren alle Elemente auf Seite bereit, eine Klasse verwenden, entfernen Sie das Click-Ereignis

Versuchen Sie, den folgenden Code:

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

Demo: https://jsbin.com/kenaqiyuqe/1/edit?html,js,output