点击时出现一个div，jquery

Question

I am building an app in ruby-sinatra that allows you to create posts and then reply to the post. I am trying to make the form for replying to a post appear when the user clicks Reply. However currently my code is only working for the first message div being rendered. All the others have the button to make the form appear but they dont work.

here is my.erb

<div class="message-link more ">
  <div class="comment-square">
    <% message.comments.each do |comment| %>

      <% comment.users.each do |user| %>
      <div><h5><%= user.username %></h5></div>
 
      <% end %>

      <script type="text/javascript">     
        $("#button").click(function() {
        $("#fn").show();
        $("#ln").show();
      });
      </script>
                    
      <p class="comment-text"><%= comment.text %>
        <input id="button" type="button" value="Reply"><br>
      </p>
        <div id="fn" hidden><input type="text" /></div><br>

      <% end %>
    </div>
 </div>

can anyone spot why?

Answer 1

You are referencing the button before it is rendered so it is not going to find it. Next issue is you have the code in a loop so you are generating a bunch of elements with the same id.

Instead use event delegation to catch the button clicks. You can than use it to find the element to show.

 $(".message-link").on("click", "input.reply", function () { $(this).closest('.comment-square').find(".fn").toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="message-link more "> <div class="comment-square"> <div> <h5>XXX</h5> </div> <p class="comment-text">Foo Bar <input class="reply" type="button" value="Reply"><br> </p> <div class="fn" hidden><input type="text" /></div><br> </div> <div class="comment-square"> <div> <h5>XXX</h5> </div> <p class="comment-text">Foo Bar <input class="reply" type="button" value="Reply"><br> </p> <div class="fn" hidden><input type="text" /></div><br> </div> </div>

The script should appear after the message-link div or be wrapped in document ready.