Почему не работает closest на form в jQuery?

Question

[bushmaks]

Не могу разобраться, почему не работает closest в данном коде. По заданию, я должен использовать плагин iCheck, у которого есть event "ifToggled".

Код из js:

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

Код html views:

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

Код, который генерирует хелперы rails:

<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>

Если использовать closest, что бы найти td, то изменяется td, но с формой почему-то не работает.
Если использовать class, тоже не дает результатов. В чем моя ошибка?

Answer 1

[tyzberd]

посмотрите как браузер исправляет не валидный 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>

форма пустая получается

Comments

[bushmaks]

Спасибо вам большое, а то я уже часа два сидел над этим.

Answer 2

[Максим Тимофеев]

а так?

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

и еще проверьте что у Вас в $(event.currentTarget)