如何在加载时显示表单答案

【问题标题】：How to show a form on load如何在加载时显示表单
【发布时间】：2019-06-01 22:42:21
【问题描述】：

如何在加载时显示表单。现在我可以在单击按钮时看到表单字段（添加键技能）。我希望所有功能一起工作。加载时我想查看表单并单击“添加关键技能”或“删除关键技能”它应该添加和删除（现在单击添加或删除它正在工作，但看不到加载的表格，只有点击“添加关键技能”我才能看到表格）

$(function()
{
    function check_to_hide_or_show_add_key_skill_link()
    {
        if ($('#key_skills .nested-fields:visible').length == 4) {
            $('#key_skills .links a').hide();
        } else {
            $('#key_skills .links a').show();
        }
    }

    $('#key_skills').on('cocoon:after-insert', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    $('#key_skills').on('cocoon:after-remove', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    check_to_hide_or_show_add_key_skill_link();
});

我的表格关键技能*

<div id="key_skills">
  <%= f.simple_fields_for :key_skills do |key_skill| %>
    <div class="nested-fields">
      <div class="field">
        <%= f.input :name , input_html: { class: 'form-control keySkill', required: true }%>
          <%= f.input :relevant_experience, input_html: { class: 'form-control', required: true } %>
            <%= link_to_remove_association "Remove Skill", f %>
      </div>
    </div>
    <% end %>
      <div class="links">
        <%= link_to_add_association 'Add Key Skill', f, :key_skills, class: "links" %>
      </div>
</div>

这是我现在的输出。点击添加关键技能我会得到表格，但我想加载它）

【问题讨论】：

缩进的力量...那额外的}) 有什么用？
如果您知道要加载它，为什么不使用事件 $(window).on('load', (event)=>{}); ？ $(function(){}) 是 jQuery onDOMReady 的简写，所以在这个函数之外做。
@treyBake 已编辑
最好做个小提琴，这将有助于隔离问题。

标签： javascript jquery html cocoon-gem cocoonjs

【解决方案1】：

由于您没有提供很多信息，我不知道顶级元素的名称是什么，但让我们假设它是 Job 并且一个工作有很多 key_skills。

在您的JobsController 中有一个create 方法，或多或少如下：

def create
  @job = Job.new 
end

如果你想立即添加一个关键技能来填写你可以写

def create
  @job = Job.new 
  @job.key_skills.build 
end

（这将添加一个空的关键技能来填充）。

cocoon-repository 相关问题：https://github.com/nathanvda/cocoon/issues/420

【讨论】：