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

遇到了一个奇怪的问题。我使用jQuery的

.append（）

将包含Rails表单的

放置在用户在我的Rails应用程序中选择的段落标记旁边

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

其次，我添加了这个效果，表单中的

确实加载了，但奇怪的是，你不能点击它。文本光标会出现一会儿，然后消失，用户实际上不能在文本字段中输入任何内容

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

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>

知道这为什么会破坏表单/表单帮助器吗

编辑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>

$（文档）.ready（函数（）{
var whather=document.getElementsByClassName（“ExampleTokle”）；
$（“p”）。单击（函数（）{
$（这个）。附加（无论什么）；
});
$（'.field'）。单击（函数（）{
var val=$（this.val（）；
如果（val==“”）{
这是select（）；
}
});
});

您已经给出了

$（“p”）

，但您的问题中没有p标签

此外，您正在将相同的

id

循环到不同的字段，这是不正确的，id应该是唯一的。取而代之的是类而不是id

您应该将一个类带到paragraphed_id字段，并根据所需的类编写jquery函数

试试这个

  <% @posts.each do |post| %>
            <h2 id="title"><%= post.title %></h2>
            <div class="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");
        $(".paragraph").click(function(){
             $(this).append(whatever);
            });
        });
</script>

$（文档）.ready（函数（）{
var whather=document.getElementsByClassName（“ExampleTokle”）；
$（“.段落”）。单击（函数（）{
$（这个）。附加（无论什么）；
});
});

您已经给出了

$（“p”）

，但您的问题中没有p标签

此外，您正在将相同的

id

循环到不同的字段，这是不正确的，id应该是唯一的。取而代之的是类而不是id

您应该将一个类带到paragraphed_id字段，并根据所需的类编写jquery函数

试试这个

  <% @posts.each do |post| %>
            <h2 id="title"><%= post.title %></h2>
            <div class="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");
        $(".paragraph").click(function(){
             $(this).append(whatever);
            });
        });
</script>

$（文档）.ready（函数（）{
var whather=document.getElementsByClassName（“ExampleTokle”）；
$（“.段落”）。单击（函数（）{
$（这个）。附加（无论什么）；
});
});

您已经给了

$（“p”）

，但是段落在哪里？好问题。行

使用标记辅助程序，表格中的每个文本块都成为一个段落（但没有单独的ID）。您已经给出了

$（“p”）

，但是段落在哪里？好问题。行

使用标记辅助程序，表格中的每个文本块都成为一个段落（但没有单独的ID。在上面做了此评论，但循环中的标记帮助器用于为每个文本块创建

标记。因此，每个帖子中都有多个p标记——这部分实际上正在工作。表单显示在正确的p标记旁边。但是，问题是表单不允许我“聚焦”输入文本。这就像表单本身正在崩溃。希望能有所帮助。聚焦文本字段时出现错误吗？刚刚检查。web控制台中没有任何内容，本地服务器日志中也没有任何内容。似乎有什么东西阻止了自动聚焦。我尝试将z索引设置为猜测，但没有效果。在上面做了此评论，但标记无效循环中的lper用于为每个文本块创建

标记。因此，每个帖子中都有多个p标记——这部分实际上正在工作。表单显示在正确的p标记旁边。但是，问题是表单不允许我“聚焦”输入文本。这就像表单本身正在崩溃。希望这能有所帮助。聚焦文本字段时出现错误吗？刚刚检查。web控制台中没有任何内容，本地服务器日志中没有任何内容。似乎有什么东西阻止了自动聚焦。我尝试将z索引设置为猜测，但没有效果。