我有一个用Rails构建的todo /任务列表类型的应用程序。
我有一个类别列表,其各自的任务位于类别名称下方。
每个任务旁边都有一个复选框,当我点击它时,我希望该特定任务的表单提交并更新任务完成/未完成。我有一个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>
问题在于,当我单击任何复选框时,它不会查找特定任务的表单,而只会选择并切换页面上的第一个任务。
非常感谢任何帮助。
由于
答案 0 :(得分:3)
正如Blender建议的那样,请尝试使用closest
代替parents
。
$('input:checkbox').click(function(e){
$(this).closest('form').submit();
});
答案 1 :(得分:0)
这是正确的行为。由于您使用的是input:checkbox
,因此它指的是页面上任何类型为checkbox的输入元素。因此,似乎因为jQuery集包含每个表单的所有复选框,所以它只处理第一个表单,因为submit()
一次不能处理多个表单。
相反,您可能想尝试以下任一方法。一个人使用$.parent('form')而不是父母()。
$(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设置。
答案 2 :(得分:0)
我尝试了所有这些,但没有一个有效。我最终通过将标签和复选框输入的ID添加到标签中来解决这个问题:
= f.check_box :complete, id: "task-#{task.id}"
= f.label :name, task.name, for: "task-#{task.id}"
现在它可以提交正确的表格。感谢您的投入。