javascript - 通过 ajax 附加内容时 CoffeeScript 不起作用

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/commentarios/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 %>

这是 view/commentarios 内部的 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)的coffescript是这样的:

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

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

感谢您抽出时间，希望我能解释一下自己，以便为您提供帮助!

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 这让我感到困惑。在发布此问题之前也找不到它。