Question

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

<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();
});

Update.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();
});

Answer 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的父元素而不是元素本身。

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

1 个答案: