在循环中打开语义 UI 日历

Question

我需要在一个循环中打开 Semantic-UI-Calendar 但没有任何效果，这是应该的。逻辑是，当我单击 data-id="expensecal" 时，它应该给我 id 即 expense_date2 或 expense_date1 但它却给我 id input:

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

我使用此方法循环打开 semantic modal，它工作正常，但不确定为什么不使用日历。

Answer 1

使用 class 初始化页面就绪的所有元素，删除点击事件

尝试使用以下代码：

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

演示：https://jsbin.com/kenaqiyuqe/1/edit?html,js,output

在循环中打开语义 UI 日历

Open Semantic UI Calendar within a loop

javascript

jquery

ruby-on-rails

semantic-ui