Jquery Mobile: привязка к изменению не выполняется после перенаправления (рельсы 4)

Я использую Rails 4.0.0rc1 с драгоценным камнем jquery-mobile-rails. Я пытаюсь скрыть и показать элементы DOM при изменении выбора, используя значение измененного поля выбора. Код ниже работает после начальной загрузки страницы.

Как только я нажимаю на ссылку запроса на размещение, jquery mobile отправляет свой AJAX-запрос. Запрос работает нормально, обновляя элемент в БД, и обновленный элемент правильно отображается на странице.

После того, как запрос AJAX возвращается, on_change перестает работать. Вот код:

<script type="text/javascript">
  function show_selected() {
    var selected_context_name = $('#context_description').val().replace(' ', '_');
    $('.' + selected_context_name).show();
  }

  function hide_unselected() {
    $('#context_description option').each(function(){
      $('.' + $(this).val().replace(' ', '_')).hide();
    });
  }

  $(document).on('pageinit', function(){
    alert('INIT HIDING');
    hide_unselected();
    show_selected();

    $('#context_description').bind('change', function(){
      alert('CLICKED ON SELECT');
      hide_unselected();
      show_selected();
    });
  });
</script>

Link_to_method, который я использую:

link_to(
  item.description,
  polymorphic_url(item, item_class => { done: !item.done? }, format: :mobile),
  options.merge({
    method: :put,
    'data-role' => 'button'
  })
)

Каждый раз, когда я нажимаю на ссылку обновления, я получаю предупреждение «INIT HIDING». После обновления сообщение «CLICKED ON SELECT» больше не отображается. Поэтому я думаю, что можно с уверенностью сказать, что привязка не работает. Однако я не получаю сообщения об ошибке.

Я пробовал $('#context_description').change(function(){ и $('#context_description').on('change', function(){ с теми же результатами. Все способы работают, но только при первом запуске.

Как правильно выполнить привязку?

Я также видел, что есть делегат, и пытался связать событие с документом, но сейчас все становится довольно запутанным. Я даже не знаю, идет ли речь о Rails или jquery mobile.

P.S.: Контроллер явно перенаправляет обратно на тот же путь (без использования :back) после каждого обновления. И я проверил, что журнал показывает: «Начал GET «/do.mobile»» изначально и после того, как AJAX возвращается без параметров.

Изменить: я понял, что после обновления элемента у выбора-ввода была другая тема данных. Я заставил его использовать то же самое, но это ничего не изменило. Может быть, это натолкнет кого-то на мысль...

Изменить: после обновления в дом добавляется форма с использованием URL-адреса, который использовался для обновления, в качестве параметра действия с методом «пост» (не «поместить»). Что это за колдовство?

Редактировать: И я нашел ДВА целых элемента с «data-role» = page, включая поле выбора для каждого и всего содержимого страницы. Для первого элемента страницы установлено значение display: none;. Тот элемент, который там выбран, все еще работает. У другого нет, хотя у них одинаковый идентификатор. Может быть, здесь неправильно перенаправление?

Редактировать: я попытался использовать форму вместо link_to с помощью put с и без установки remote: true явно... Ничего не узнал...


person A5308Y    schedule 16.06.2013    source источник
comment
#context.... Добавляется динамически?   -  person Omar    schedule 16.06.2013
comment
Кнопка получает свой идентификатор из ‹%= select :context, :description, ... %›. Элементы, которые должны быть скрыты, также получают свой класс из базовой модели. Итак: да, они создаются динамически. Я проверил дом, хотя. Назначенные css-селекторы одинаковы для неудачного и успешного вызова функции .change.   -  person A5308Y    schedule 16.06.2013
comment
Хорошо, тогда попробуй $(document).on('change', '#context', function()   -  person Omar    schedule 17.06.2013
comment
Спасибо! Теперь он принимает изменения. Однако он не выполняет скрытие правильно, потому что он выбирает значение первого экземпляра выбора #context_description. Есть ли способ найти_по_ид и использовать последний? Я знаю, что у вас должен быть только один идентификатор, но каким-то образом jquery mobile создает эту копию всей страницы...   -  person A5308Y    schedule 17.06.2013
comment
Извините, я не понял ваш последний комментарий :/ найти что по id? Тот же идентификатор на предыдущей странице? Тот же код, что и выше, но селектор $.mobile.activePage.prev('[data-role=page]').find('#context').val(); для получения значения.   -  person Omar    schedule 17.06.2013
comment
ДА! МОЙ БОГ! Я не могу в это поверить. Это заняло весь день. Большое спасибо!!! Мне просто нужно было использовать $.mobile.activePage.find('#context').val();   -  person A5308Y    schedule 17.06.2013
comment
Вы собираетесь написать ответ, чтобы я мог принять его и проголосовать за него?   -  person A5308Y    schedule 17.06.2013
comment
Отлично, это было легко, лол.   -  person Omar    schedule 17.06.2013


Ответы (1)


Чтобы прикрепить событие к динамически вставленным элементам, используйте...

$(document).on('change', '.selector', function () { code });

Чтобы получить значение динамического элемента по идентификатору (в вашем случае)...

$.mobile.activePage.find('#id').val();
person Omar    schedule 16.06.2013