Переключение партиалов рельсов с помощью jQuery

Я пытаюсь использовать jQuery в своем приложении rails, чтобы по существу переключаться между двумя частями одним нажатием кнопки. Желаемое поведение выглядит следующим образом: страница отображается с профилем пользователя и кнопкой «редактировать профиль». Когда нажимается кнопка «редактировать профиль» в партиале профиля, партиал удаляется из 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>

У меня проблема в том, что я могу запустить только одну функцию (т.е. загрузка страницы, и я могу переключиться на редактирование, но не обратно). Любое руководство будет оценено.


person jprince    schedule 22.02.2014    source источник


Ответы (1)


В зависимости от версии jQuery вы должны использовать

До версии 1.7: $('#save').live('click', function(){...})

1.7 и выше: $('#save').on('click', function(){...})

И то же самое для #edit.

В чем разница между методами bind и live в jQuery?

Вкратце: .bind() будет применяться только к элементам, которые вы в данный момент выбрали в своем объекте jQuery. .live() будет применяться ко всем текущим совпадающим элементам, а также ко всем, которые вы можете добавить в будущем.

person Pavel Pachkovsky    schedule 22.02.2014
comment
Спасибо за ответ, но кажется, что .live() был удален в jQuery 1.9 (api.jquery.com/live) и .on() дают мне то же поведение, что и исходный код — первый переключатель работает, но я не могу переключиться обратно. - person jprince; 22.02.2014
comment
@jprince Я не уверен, что вы делаете, но посмотрите здесь, может быть, это поможет railscasts.com/episodes/205-unobtrusive-javascript - person Pavel Pachkovsky; 22.02.2014