使用 jQuery 切换 Rails 部分

Question

我正在尝试在我的 Rails 应用程序中使用 jQuery，以便在单击按钮时在两个部分之间进行切换。所需的行为如下：页面呈现用户的个人资料和“编辑个人资料”按钮。单击配置文件部分上的“编辑配置文件”按钮时，该部分将从 DOM 中删除，并呈现编辑配置文件部分。单击编辑配置文件部分上的“保存”按钮时，该操作应反转并再次显示用户的配置文件。我是 jQuery 新手，但在 stackoverflow 的帮助下，我得到了以下脚本：

<script language="javascript" type="text/javascript">
  jQuery(
    function editProfile($) {
      $('#edit').click(function() {
        $("#edit-profile").html('<%= escape_javascript(render :partial => "shared/edit_profile").html_safe %>');
        $("#show-profile").empty();
      });
    }
  );

  jQuery(
    function showProfile($) {
      $('#save').click(function() {
        $("#show-profile").html('<%= escape_javascript(render :partial => "shared/show_profile").html_safe %>');
        $("#edit-profile").empty();
      });
    }
  );
</script>

我的html.erb如下：

<div id="show-profile">
  <%= render :partial => "shared/show_profile" %>
</div>
<div id="edit-profile"></div>

我遇到的问题是我似乎只能运行一个功能（即页面加载，我可以切换到编辑，但不能返回）。任何指导将不胜感激。

Answer 1

取决于你应该使用的 jQuery 版本

1.7 之前： $('#save').live('click', function(){...})

1.7 及更高版本： $('#save').on('click', function(){...})

#edit 也是如此。

What is the difference between the bind and live methods in jQuery?

简而言之：.bind() 仅适用于您当前在 jQuery 对象中选择的项目。 .live() 将应用于所有当前匹配的元素，以及您将来可能添加的任何元素。