是jQuery.append破坏了我的Rails表单并导致它无法完全呈现

遇到一个奇怪的问题。我使用jQuery的.append()将包含Rails表单的<div>放在用户在Rails应用程序中选择的段落标记旁边。

首先，在添加jQuery效果之前，我通过在页面上放置一个表单来测试它。它正确地加载、工作并将用户的文本发布到我的数据库中。

其次，我添加了这个效果，带有表单的<div>确实加载了，但奇怪的是，你无法点击它。文本光标会出现一段时间，然后消失，用户实际上无法在text_field中输入任何内容。

以下是我正在运行的内容：

view.html.erb

    <% @posts.each do |post| %>
            <h2 id="title"><%= post.title %></h2>
            <div id="paragraph"><%= markdown(post.content) %></div>    
    <% end %>
    <div class="exampleToggle"> <!-- div that should append --> 
        <%= form_for :comments do |f| %>
            <div class="form-group">
            <div class="field">
            <%= f.label :username %><br>
            <%= f.text_field :username, class: "form-control" %>
                </div>
                </div>
            <div class="form-group">
            <div class="field">
            <%= f.label :post %><br>
            <%= f.text_area :post, class: "form-control" %>
          </div>
          </div>
    <div class="actions">
        <%= f.submit "Save", class: "btn btn-success-outline" %>
    </div>
<% end %>
</div>
<script>
    $(document).ready(function(){
        var whatever = document.getElementsByClassName("exampleToggle");
        $("p").click(function(){
             $(this).append(whatever);
            });
        });
</script>

正如我所提到的，表单在点击段落元素后确实加载并看起来应该如何；但是，表单将不接受文本输入。

此外，为了清晰起见，这里是将<div>放置在点击段落右侧所涉及的CSS：

 {
  position: relative;
}
.exampleToggle {
  position: absolute;
  top: 0;
  margin-left: 8%;
  left: 100%;
  width: 35%;
  height: 100px;
}

知道为什么这会破坏表单/表单助手吗？

第1版：为了清楚起见，这里的中心问题似乎是焦点效应。为了解决这个问题，我更新了Javascript，允许在激活.field类时输入值，但它没有解决这个问题。

<script>
    $(document).ready(function(){
        var whatever = document.getElementsByClassName("exampleToggle");
        $("p").click(function(){
             $(this).append(whatever);
            });
        $('.field').click(function () {
            var val = $(this).val();
            if (val == "") {
            this.select();
        }
    });
        });
</script>