Rails 4：动态添加的复选框未提交

Question

我开始学习Rails，并尝试将AJAX与一些动态添加到清单中的记录一起应用。 然后，我想删除直接在清单中通过复选框选择的多个记录。

它工作正常，但是当我创建新记录并希望在不刷新页面的情况下将其删除时却无法正常工作 。 标头的响应是：“ AccountsController＃destroym中的ActiveRecord :: RecordNotFound”。 就像我单击按钮时未选中我的复选框一样。

谢谢你的帮助 ：）

accounts_controller.rb

def destroym
  Account.destroy(params[:delete])
  respond_to do |format|
    format.html {redirect_to accounts_path}
    format.js #render accounts/destroym.js.erb
  end
end

_row.html.erb

 <% @data = Account.find(id) %> <tr id='tr<%= @data.id %>'> <td><%= @data.id %></td> <td><%= @data.login %></td> <td><%= check_box_tag 'delete[]', @data.id %></td> </tr> 

index.html.erb

 <table class="table table-striped table-hover " id="accountsListing"> <%= form_tag destroym_accounts_path, method: :DELETE, remote: true, id: "deleteForm" do %> <thead> <tr> <th>#</th> <th>Username</th> <th>Password</th> <th>Website</th> <th>Date</th> <th>Editer</th> <th><%= submit_tag "delete" %> <%= link_to "Delete", '', :onclick => "$('#deleteForm').submit()", id: "removePwd", class: "text-danger", remote: true, method: :DELETE %> </th> </tr> </thead> <tbody> <% @accounts.each do |account| %> <%= render 'row', id: account.id %> <% end %> </tbody> <% end %> </table> 

destroym.js.erb

$("#accountsListing input:checked").closest("tr").remove();

create.js.erb

$("#accountsListing tr:first").after("<%= escape_javascript (render 'row', id:@account.id) %>");

Answer 1

在这种情况下的问题是，您要替换整个页面的HTML ...因此，绑定到您元素的所有DOM事件也会被破坏。

当您替换html（.js.erb文件）时，Rails将为您的元素提供一些特殊的属性（Rails称为“ unobstrusive JavaScript” ，因为您的元素中没有JS代码）。

当然，这里的问题是Rails使用的JS代码（请参阅我的链接）仅在页面启动时应用。

您有几种选择：

1）您的destroy.js.erb只能删除您刚删除的确切行（而不是替换所有行）。

2）您可以自己调用rails-ujs的代码。 这是一个hack，不应该被认真考虑。

3）您可以“自动”重新加载页面（您失去了AJaX的优势）。

4）您可以编写自己的JS代码来发送AJaX请求。

Answer 2

我的解决方案来处理动态创建的复选框。 如果要处理动态添加的元素上的事件，则必须使用on函数。

JS代码

$("#deleteBtn").on("click", function() {

    var ids = [];
    $('#accountsListing :checkbox:checked').each(function(){
        ids.push($(this).val());
     });

    $.ajax({
    url: '/accounts/destroym',
    type: 'POST',
    data: {
        "_method":"DELETE",
        "authenticity_token": window._token,
        "delete[]": ids
    },
    });
});