title: CoffeeScript not working when appending content through ajax
body: <p>Hello I'm working with rails and have been trying to make ajax requests when submiting forms for comments so the result is appended to the list of comments. I've got it to work thanks to this video: <a href="https://www.youtube.com/watch?v=K-sns5tNdTY" rel="nofollow noreferrer">https://www.youtube.com/watch?v=K-sns5tNdTY</a> .</p>
  
  <p>Later I decided to add answers to my comments, which I implemented with a new model and made a button with coffeescript on each comment to show the answers and a form for a new answer to that specific comment (the default css state is hidden). And then append the answers the same way I've done with the comments. It was kind of a pain in the ass but got it to work. </p>
  
  <p>Now the problem I have is that when adding a comment, the "Responder" button on the appended comment refreshes the page instead of working like it does for the other comments (showing the section that is hidden).</p>
  
  <p>This is how I render the comments and the form (sorry for it being in spanish):</p>
  
  <pre><code>&lt;div id="seccion-comentarios" class="border-element-sm-div" style="overflow: hidden"&gt;
                      &lt;h3 style="width: 500px"&gt;Comentarios&lt;/h3&gt;
                          &lt;div id="comentarios"&gt;
                              &lt;%= render @comentarios %&gt;
                          &lt;/div&gt;
                      &lt;% if @comentarios.count &lt;= 0 %&gt;
                          &lt;p style="font-style: italic; color: grey; margin-left: 10px"&gt; Aún no hay comentarios. Haz uno!&lt;/p&gt;
                      &lt;% end %&gt;
                      &lt;% if usuario_signed_in? %&gt;
                      &lt;div style="overflow: auto"&gt;
                          &lt;%= render :partial =&gt; 'comentarios/form' %&gt;
                      &lt;/div&gt;
                      &lt;% end %&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>This is the form for my comments (views/comentarios/form):</p>
  
  <pre><code>&lt;%= form_for @comentario , remote: true do |f| %&gt;
  
      &lt;%= f.hidden_field :favor_id, value: @favor.id%&gt;
  
              &lt;%= f.label :texto, "Escribe un comentario:" %&gt;
              &lt;br/&gt;
              &lt;%= f.text_area :texto, required: true,class: "form-control", style: "width: 99%; max-width: 99%"%&gt;
  
          &lt;div style="float: right; padding-top: 10px; margin-right: 1%"&gt;
              &lt;%= f.submit "Comentar", :class=&gt;'btn btn-primary'%&gt;
          &lt;/div&gt;
  
  &lt;% end %&gt;
  </code></pre>
  
  <p>And this is the create.js.erb for that inside views/comentarios</p>
  
  <pre><code>$('#comentarios').append($("&lt;%= j render @comentario %&gt;").hide().fadeIn(500));
  $('#comentario_texto').val("");
  </code></pre>
  
  <p>Then for each comment I render this (views/comentarios/_comentario.html.erb) :</p>
  
  <pre><code>            &lt;div class="border-gau-sm" style="overflow: auto"&gt;
                  &lt;div&gt;
                      Here comes the info of my comment
                  &lt;/div&gt;
                  &lt;div style="float: right; margin-top: -10px; margin-bottom: -2px;"&gt;
                      &lt;a class= "respuestas-link btn btn-primary btn-xs" data-section-id="respuestas-seccion-&lt;%=comentario.id%&gt;" href="#"&gt;
                          Respuestas
                          &lt;span class="caret" style=""&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;section id="respuestas-seccion-&lt;%=comentario.id%&gt;" style="display: none"&gt;
                      &lt;br/&gt;
                      &lt;div&gt;
                          Here's what I want to show
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Finally the coffeescript that get the answers (#respuestas-seccion) to show is this: </p>
  
  <pre><code>$(document).on 'turbolinks:load', -&gt;
    $('.respuestas-link').click (event) -&gt;
      event.preventDefault()
      commentSectionId = $(this).data('sectionId')
      $('#' + commentSectionId).fadeToggle()
  </code></pre>
  
  <p>I've tried setting the default state of the answer section to be visible as to see if it was rendered correctly (removing the <code>display:none</code>in this line: <code>&lt;section id="respuestas-seccion-&lt;%=comentario.id%&gt;" style="display: none"&gt;</code> in _comentarios.html.erb ).
  It turned out it was, and I am able to post an answer. But the button that toggles that section, is still reloading the page. Maybe it has something to do with the <code>$(document).on 'turbolinks:load', -&gt;</code> in the coffeescript? Any ideas? </p>
  
  <p>Thanks for your time and hope I could explain myself so you can help!</p>