Question

您好我正在使用rails并且在提交注释表单时一直在尝试发出ajax请求，因此结果会附加到注释列表中。由于这段视频，我已经开始工作了：https://www.youtube.com/watch?v=K-sns5tNdTY。

后来我决定添加我的评论的答案，我用新模型实现了这个评论，并在每个评论上创建了一个带有coffeescript的按钮来显示答案和一个表单以获得该特定评论的新答案（默认的css状态是隐）。然后以与我完成评论相同的方式附加答案。这是一种痛苦的屁股，但让它发挥作用。

现在我遇到的问题是，在添加评论时，附加评论上的“响应者”按钮会刷新页面，而不是像其他评论那样工作（显示隐藏的部分）。

这是我呈现评论和表格的方式（抱歉是西班牙语）：

<div id="seccion-comentarios" class="border-element-sm-div" style="overflow: hidden">
                    <h3 style="width: 500px">Comentarios</h3>
                        <div id="comentarios">
                            <%= render @comentarios %>
                        </div>
                    <% if @comentarios.count <= 0 %>
                        <p style="font-style: italic; color: grey; margin-left: 10px"> Aún no hay comentarios. Haz uno!</p>
                    <% end %>
                    <% if usuario_signed_in? %>
                    <div style="overflow: auto">
                        <%= render :partial => 'comentarios/form' %>
                    </div>
                    <% end %>
                </div>

这是我的评论表格（views / comentarios / form）：

<%= form_for @comentario , remote: true do |f| %>

    <%= f.hidden_field :favor_id, value: @favor.id%>

            <%= f.label :texto, "Escribe un comentario:" %>
            <br/>
            <%= f.text_area :texto, required: true,class: "form-control", style: "width: 99%; max-width: 99%"%>

        <div style="float: right; padding-top: 10px; margin-right: 1%">
            <%= f.submit "Comentar", :class=>'btn btn-primary'%>
        </div>

<% end %>

这是内部视图/ comentarios

中的create.js.erb

$('#comentarios').append($("<%= j render @comentario %>").hide().fadeIn(500));
$('#comentario_texto').val("");

然后对于每个评论我渲染这个（views / comentarios / _comentario.html.erb）：

            <div class="border-gau-sm" style="overflow: auto">
                <div>
                    Here comes the info of my comment
                </div>
                <div style="float: right; margin-top: -10px; margin-bottom: -2px;">
                    <a class= "respuestas-link btn btn-primary btn-xs" data-section-id="respuestas-seccion-<%=comentario.id%>" href="#">
                        Respuestas
                        <span class="caret" style=""></span>
                    </a>
                </div>
                <section id="respuestas-seccion-<%=comentario.id%>" style="display: none">
                    <br/>
                    <div>
                        Here's what I want to show
                    </div>
                </section>
            </div>

最后得到答案（＃respuestas-seccion）的coffeescript是这样的：

$(document).on 'turbolinks:load', ->
  $('.respuestas-link').click (event) ->
    event.preventDefault()
    commentSectionId = $(this).data('sectionId')
    $('#' + commentSectionId).fadeToggle()

我已尝试将答案部分的默认状态设置为可见，以查看其是否已正确呈现（删除此行中的display:none：_comentarios.html.erb中的<section id="respuestas-seccion-<%=comentario.id%>" style="display: none">）。原来它是，我能够发布答案。但切换该部分的按钮仍在重新加载页面。也许它与coffeescript中的$(document).on 'turbolinks:load', ->有关？有任何想法吗？

感谢您的时间和希望，我可以解释自己，以便您可以提供帮助！

Answer 1

将CoffeeScript更改为：

$(document).on 'turbolinks:load', ->
  $('#comentarios').on 'click' , '.respuestas-link' , (event) ->
    event.preventDefault()
    commentSectionId = $(this).data('sectionId')
    $('#' + commentSectionId).fadeToggle()

当我从这个问题中得到： Jquery click event not working after append method，这是非常相似，但不使用create.js.erb这种混淆我。在发布此问题之前也找不到它。

通过ajax追加内容时，CoffeeScript无法正常工作

1 个答案: