Rails - ajax 选择菜单只触发一次？答案

【问题标题】：Rails - ajax select menu only firing once?Rails - ajax 选择菜单只触发一次？
【发布时间】：2013-11-21 02:03:38
【问题描述】：

我知道这个问题被问了很多，但没有一个解决方案有帮助。我有一个选择菜单，第一次运行没问题，但在页面重新加载之前不会再次执行。

<div class="dynamic">
<%= render 'status_selector' %>
</div>

这是部分内部的内容：

<%= form_for @report, :remote => true, :html => {:id => 'report-edit-status'} do |f| %>
    <%= f.hidden_field :report_id, :value => @report.id  %>
    <%= f.select(:status, STATUS, {},:class => "status-change-selector", :style => "font-size:1.1em;") %>
<% end %>

这是 Application.js：

$('.status-change-selector').unbind('change');
$('.status-change-selector').change(function(event) {
    event.preventDefault();
    $(this).closest('form').submit();
});

更新.js.erb

$('.dynamic').html("<%= escape_javascript(render(:partial => 'reports/status_selector')).html_safe %>");

编辑：

根据 Peter Goldstein 的建议，我向 Parent 元素添加了一个侦听器，因此我不需要将 Jquery 代码添加到我的 Update.js.erb 中。这就是我现在的 Application.js 中的内容：

$('.dynamic').on('change', '.status-change-selector', function(event) {
    event.preventDefault();
    $(this).closest('form').submit();
});

【问题讨论】：

标签： jquery ruby-on-rails ajax

【解决方案1】：

因此，您的更新正在创建一个您的更改事件不适用的新元素。 JS 更改绑定到执行时存在的元素。解决此问题的一种简单方法是添加：

$('.status-change-selector').unbind('change');
$('.status-change-selector').change(function(event) {
  event.preventDefault();
  $(this).closest('form').submit();
});

到您的 Update.js.erb 的末尾。这将绑定新创建的 DOM 元素。其他更 DRY 的解决方案稍微复杂一些，但基本上涉及将侦听器附加到您要插入的 DOM 的父元素而不是元素本身。

【讨论】：

嘭！做到了！ 1 个问题 - 这仍然被认为是“不显眼的 javascript”吗？
我可能会说是的，因为 JS 没有嵌入到 HTML 中。尽管正如我提到的，有一些方法可以通过将 application.js 中的侦听器添加到父 DOM 元素来解决这个问题。那么你就不需要复制代码了。但是必要的监听器要复杂一些。