Jquery移动: Binding on "change" not excuted after redirect (rails 4)

Question

我正在使用 Rails 4.0.0rc1 和 gem 'jquery-mobile-rails'。我试图使用更改后的选择框的值来隐藏和显示选择更改时的 DOM 元素。下面的代码在页面最初加载后起作用。

一旦我点击 put-request-link，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”警报。更新后，不再显示“单击选择”消息。所以我认为可以肯定地说绑定(bind)不起作用。但我没有收到错误消息。

我尝试了 $('#context_description').change(function(){ 和 $('#context_description').on('change', function(){ 具有相同的结果。所有方法都有效，但仅在第一次运行时有效。

如何正确绑定(bind)？

我也看到了委托(delegate)，我试图将事件绑定(bind)到文档，但现在事情变得非常困惑。我什至不知道这是关于 Rails 还是 jquery mobile 了。

附注:每次更新后， Controller 都会显式重定向回同一路径(不使用 :back)。我检查了日志显示:“Started GET "/do.mobile"”最初和 AJAX 返回时没有参数。

编辑:我意识到更新项目后选择输入有不同的数据主题。我强制它使用相同的，但这并没有改变任何东西。也许这会激发某人的想法......

编辑:更新表单后，将其添加到 dom，使用用于更新的 url 作为操作参数，并使用方法“post”(而不是“put”)。这是什么魔法？

编辑:我发现两个带有“data-role”=page 的完整元素，包括每个元素和页面全部内容的选择框。第一个页面元素设置为 display: none; 其中的一个选择仍然有效。另一个没有，但他们有相同的 id。也许这里的重定向是错误的？

编辑:我尝试使用表单而不是带有 put 和不设置 remote: true 的 link_to 显式...没有学到任何东西...

Answer 1

要将事件附加到动态插入的项目，请使用...

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

通过 id 获取动态项目的值(在您的情况下)...

$.mobile.activePage.find('#id').val();