0

问题：它只提交页面上的第一个表单。

我有一个待办事项，完成后可以通过单击复选框来检查。

在我的部分我有一个表格。它的渲染次数与待办事项一样多，但具有不同的 id。在表单中有一个复选框。单击时表单提交。

部分的

<%= form_for todo, :remote => true, :html => {:id => "edit_done_todo_#{todo.id}"} do |f| %>
  <%= f.hidden_field(:done_by_user_id,:value => current_user.id) %>
  <%= f.check_box :completed, :class => "done_box", :id => todo.id %>
<% end %>

这是javascript

jQuery.fn.mark_todo_done = function (){
    var id = $(this).attr("id")
    console.log(id)
    $("#edit_done_todo_" + id).submit()

};
$(document).ready(function() {
 $(".done_box").live("click", function() { 
     $(this).mark_todo_done();
   })
})

console.log 显示正确的 id。但是，页面上的第一个表单被提交。

4

1 回答 1

1

Railscasts 在这个主题上有出色的表现，称为 jquery-ajax-revised (#136)。它包含了一个简单的待办事项列表的几乎所有基本知识。

关于您的问题，您所需要的只是以下 javascript：

  $(document).ready(function() {
    $('.edit_todo input[type=submit]').remove();
    $('.edit_todo input[type=checkbox]').click(function() {
      $(this).parent('form').submit();
    });
  });

第二行意味着您从评论中删除提交按钮（如果有的话）。第三行响应实际单击复选框（从类名为 edit_todo 的表单中，您可以通过单击 Chrome 中的检查元素来检查表单的类名）。第四行实际上从您单击的复选框中获取表单元素并提交该表格。

希望我在此回答了您的问题，否则我想对您的问题进行进一步的解释。

于 2013-02-01T15:25:33.333 回答