Why doesn't closest work on form in jQuery?

Question

JavaScript

I can't figure out why closest doesn't work in this code. By assignment, I have to use the iCheck plugin, which has an "ifToggled" event.

js code:

$('#Todos input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    increaseArea: '20%' // optional
    });
$('input').on('ifToggled', event => {
      $(event.currentTarget).closest('form').submit();
    });

html view code:

<tr>
            <%= form_for todo do |form| %>
            <td><%= todo.text %></td>
            <td><%= form.check_box(:isCompleted) %></td>
            <% end %>
          </tr>

Code that generates rails helpers:

<div id="Todos">
        <table>
      <h2>Семья</h2>
          <tr>
            <form class="edit_todo" id="edit_todo_1" action="/todos/1" accept-charset="UTF-8" method="post">
            <input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" />
            <input type="hidden" name="authenticity_token" value="W19BuAtSKynbPBlmIGg77Z7r72LTxWDleFZQiETlkWWsY7JoByjgG+xR84ruG1sjsJXSrKfptYVU4IRhw5VLYQJ==" />
            <td>Купить молоко</td>
            <td><input name="todo[isCompleted]" type="hidden" value="0" />
                   <input type="checkbox" value="1" name="todo[isCompleted]" id="todo_isCompleted" />
            </td>
</form> 
</tr>

If you use closest to find td, then td changes, but for some reason it does not work with the form.
If you use a class, it also does not give results. What's my mistake?

Answer 1

see how the browser fixes invalid html

<div id="Todos">
        <h2>Семья</h2><table>
      
          <tbody><tr>
            <form class="edit_todo" id="edit_todo_1" action="/todos/1" accept-charset="UTF-8" method="post"></form>
            <input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
            <input type="hidden" name="authenticity_token" value="W19BuAtSKynbPBlmIGg77Z7r72LTxWDleFZQiETlkWWsY7JoByjgG+xR84ruG1sjsJXSrKfptYVU4IRhw5VLYQJ==">
            <td>Купить молоко</td>
            <td><input name="todo[isCompleted]" type="hidden" value="0">
                   <input type="checkbox" value="1" name="todo[isCompleted]" id="todo_isCompleted">
            </td>
 
</tr>
</tbody></table></div>

the form is empty

Answer 2

and so?

$('#Todos input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    increaseArea: '20%' // optional
    }).on('ifToggled', event => {
      $(event.currentTarget).closest('form').submit();
    });

and check what you have$(event.currentTarget)