1

我有一个使用 Rails 构建的待办事项/任务列表类型的应用程序。

我在类别名称下方有一个类别列表及其各自的任务。

我在每个任务旁边都有一个复选框，当我单击它时，我希望该特定任务的表单提交并将任务更新为完整/不完整。我有一个 jQuery 函数来执行此操作：

$(function(){
  $('input:checkbox').on('click', function(){
    $(this).parents('form').submit();
  });
});

我的表格看起来像这样（在 HAML 中）：

- form_class = task.complete? ? "edit_task complete" : "edit_task"

= form_for task, remote: true, html: {:class => form_class } do |f|
  = f.check_box :complete
  = f.label :complete, task.name
  = link_to task_path(task.id), remote: true, method: :delete, class: "delete-task" do
    %i.icon-remove.pull-right

输出 HTML 是这样的：

<form accept-charset="UTF-8" action="/tasks/338" class="edit_task" data-remote="true" id="edit_task_338" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="q7bvSGPr1IDf1p2/SKsssbdiQj+NBWmg/C6zPB3x+jM=">
</div>
<input name="task[complete]" type="hidden" value="0">
<input checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">
<label class="338" for="task_complete" id="task-label">another task</label>
<a href="/tasks/338" class="delete-task" data-method="delete" data-remote="true" rel="nofollow">
<i class="icon-remove pull-right"></i></a>
</form>

问题是，当我单击任何复选框时，它不会找到该特定任务的表单，而只会选择并切换页面上的第一个任务。

任何帮助将非常感激。

谢谢

4

3 回答 3

3

正如 Blender 建议的那样，尝试使用closest而不是parents.

$('input:checkbox').click(function(e){
  $(this).closest('form').submit();
});
于 2013-03-09T22:50:27.947 回答
0

这是正确的行为。由于您使用input:checkboxthis 是指页面上复选框类型的任何输入元素。所以似乎由于 jQuery 集包含每个表单的所有复选框，它只处理第一个可能是因为submit()一次不能处理多个表单。

相反，您可能想尝试以下任一方法。一个使用$.parent('form')而不是 parents()。

$(function(){
  $('input:checkbox').on('click', function(){
    $(this).parent('form').submit(); //get my immediate parent which is type form.
  });
});

或将表单的 id 添加到复选框，并用于查找其父级。如果您的输入在表单中嵌套得更深，这很好，这意味着 parent() 将不起作用。

<input data-form="edit_task_338" checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">

//then
$(function(){
      $('input:checkbox').on('click', function(){
        //use the data-attr to retrive the form's id i.e edit_task_338
        $('form[id='+ $(this).data('form')) +']').submit(); 
      });
    });

它们还有更多方法，但涉及不同的 HTML 设置。

于 2013-03-09T22:57:56.423 回答
0

我尝试了所有这些，但都没有奏效。我最终通过将任务的 id 添加到标签和复选框输入来解决这个问题，如下所示：

= f.check_box :complete, id: "task-#{task.id}"
= f.label :name, task.name, for: "task-#{task.id}"

现在可以提交正确的表单了。感谢您的输入。

于 2013-03-18T01:36:48.883 回答