Javascript 使用Jquery显示/隐藏切换。单击，可用于新用户，但不能用于种子

我正在尝试使用Jquery隐藏/显示指向div id的链接，并使用。单击。加载页面时，我使用javascript隐藏编辑按钮和取消按钮。当我单击Edit your profile链接时，我的目标是Edit_button类，该类应显示按钮

我不知道为什么它有一半的时间是有效的。当我编辑我创建的现有种子的用户配置文件时，隐藏/显示根本不起作用，但是当我创建一个新用户时，Jquery工作得很好

任何帮助都将不胜感激

profile.html.erb

<div class="profile_information">
    <%= render partial: 'profileinformation', locals: {user: @user} %>
</div>
    <h3 class="edit", id = "show_edit_button"><%= link_to "Edit your profile", :remote => :true  %></h3>
    <h3 class='edit', id="cancel_edit_button"><%= link_to "Cancel", :remote => :true  %></h3>

<script type="text/javascript">
    $(document).on('ready page:load', function(){
        $(".edit_button").hide();
        $('#cancel_edit_button').hide();
    });

</script>

<h3>Location:</h3>
<div class="location">
  <p id = "location"><%= @user.location %></p>
</div>
<div class = "edit_button", id = "edit_location_button">
  <%= link_to "Edit Location", :remote => :true  %>
</div>

<h3>Biography:</h3>
<div class = "biography">
  <p id = "biography"><%= @user.biography %></p>
</div>
<div class="edit_button" id ="edit_biography_button">
   <%= link_to "Edit Biography", :remote => :true  %>
</div>

<h3>Experience:</h3>
  <div class="experience">
    <p class="info" id="experience"><%= @user.experience %></p>
  </div>

<div class = "edit_button", id ="edit_experience_button">
  <%= link_to "Edit Experience", :remote => :true  %>
</div>

试试这个：

$button = $('#show_edit_button');

$button.on('click', function() {
    $('.edit_button').show();
    $('#cancel_edit_button').show();
    $(this).hide();
});

---

谢谢你的建议。当我创建一个新的用户时，它会工作，但是当我试图编辑我创建的现有种子时，按钮不会显示，但是jquery请求会通过。你知道为什么会这样吗？

$button = $('#show_edit_button');

$button.on('click', function() {
    $('.edit_button').show();
    $('#cancel_edit_button').show();
    $(this).hide();
});