В To-Do приложении таски отмечаются через один. Почему?

Question

[Кирилл Кириллов]

Всем привет! Помогите нубу разобраться ))) В общем пытаюсь сделать To-Do, вот ссылка на codepen - https://codepen.io/Kirill-Kirillov/pen/JygdYg При добавлении новых задач, они отмечаются через одну, не могу понять, почему так, может кто подскажет?

Answer 1

[0xD34F]

Потому что при каждом создании нового пункта вешается дополнительный обработчик клика на все пункты списка. В результате на чётных пунктах срабатывает чётное количество обработчиков - класс goal-check выставляется и тут же снимается.

UPD. Обработчики кликов на .goal и .delete надо вешать один раз, применяя делегирование:

$('.todo-task').on('click', '.delete', function() {
  $(this).parent().remove();   
});

$('.todo-task').on('click', '.goal', function() {
  $(this).toggleClass('goal-check');
});

Comments

[Кирилл Кириллов]

Вы бы еще написали, как это побороть)))

[0xD34F]

Кирилл Кириллов, дополнил ответ.

[Кирилл Кириллов]

Спасибо! Всё верно, помогли!

Answer 2

[Stalker_RED]

Обработчики delete и check можно делегировать на самом список.
Шаблон задачи можно вынести в html.

Как-то так https://codepen.io/anon/pen/ayepod