CoffeeScript在通過ajax追加內容時不起作用

你好我正在使用Rails，並且在提交表單以獲得註釋時一直試圖創建Ajax請求，所以結果被附加到註釋列表中。我已經得到它的工作感謝這個視頻：https://www.youtube.com/watch?v=K-sns5tNdTY。CoffeeScript在通過ajax追加內容時不起作用

後來我決定給我的評論添加答案，我用一個新模型實現了這個答案，並在每個評論上都做了一個帶有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>

這是我的意見（意見/住客評論/表格）形式：

<%= 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("");

然後爲每個評論我仁德R此（瀏覽量/住客評論/ _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>

最後那得到答案的CoffeeScript（＃respuestas-seccion）顯示是這樣的：

$(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">）。原來，這是，我可以發佈答案。但切換該部分的按鈕仍在重新加載頁面。也許這跟咖啡文本中的有關？有任何想法嗎？

感謝您的時間，並希望我能解釋一下自己，以便您能幫助！

來源

2016-12-06 Macu Duranti

改變了的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哪種混淆了我。在發佈這個問題之前也找不到它。

來源

2016-12-06 15:42:52

CoffeeScript在通過ajax追加內容時不起作用

回答

相關問題