通过 ajax 附加内容时 CoffeeScript 不起作用答案

【问题标题】：CoffeeScript not working when appending content through ajax通过 ajax 附加内容时 CoffeeScript 不起作用
【发布时间】：2017-04-21 06:25:42
【问题描述】：

您好，我正在使用 rails，并且在为 cmets 提交表单时一直尝试发出 ajax 请求，因此结果将附加到 cmets 列表中。多亏了这个视频：https://www.youtube.com/watch?v=K-sns5tNdTY。

后来我决定为我的 cmets 添加答案，我用一个新模型实现了它，并在每个评论上制作了一个带有咖啡脚本的按钮来显示答案和一个表单，用于对该特定评论的新答案（默认 css 状态是隐）。然后以与我对 cmets 相同的方式附加答案。这有点让人头疼，但让它发挥了作用。

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

这就是我渲染 cmets 和表单的方式（抱歉它是西班牙语）：

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

这是我的 cmets 的表格（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 %>

这是内部视图/评论的 create.js.erb

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

然后对于每条评论，我都会呈现这个 (views/commentarios/_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）是这样的：

$(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', -> 有关？有任何想法吗？

感谢您的宝贵时间，希望我能解释一下自己，以便您提供帮助！

【问题讨论】：

标签： javascript ruby-on-rails ajax coffeescript

【解决方案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 这让我很困惑。在发布此问题之前也找不到它。

【讨论】：