表單提交jQuery的單擊事件只選擇第一種形式

Question

我有一個使用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> 

的問題是，當我單擊ANY複選框時，不是找到特定任務的表單，而只是選擇並切換頁面上的第一個任務。

任何幫助將不勝感激。

感謝

Answer 1

由於攪拌機建議，嘗試使用closest代替parents。

$('input:checkbox').click(function(e){ 
    $(this).closest('form').submit(); 
}); 

Answer 2

這是正確的行爲。由於您使用的是，因此它指向頁面上任何類型複選框的輸入元素。所以看起來，因爲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設置。

Answer 3

我嘗試了所有這些，但都沒有成功。我終於想通了通過添加任務的ID標籤和複選框的輸入，像這樣：

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

現在的作品提交適當的形式。感謝您的輸入。