Как исправить скрипт добавления/удаления класса по клику?

Question

[Im p3l]

Добрый вечер,
При нажатии на новый элемент li должен добавиться/удалиться класс checked, но ничего не происходит.
https://jsfiddle.net/vothd18b/

var tasks = [];
var i = 0;

$('#new').keyup(function (event) {
    if ((event.keyCode == 13)) {
        if ($(this).val() !== '') {
            $('#main').show();
            $('#list').append('<li class="complete" data-id="' + i + '">\
            <div class="task">\
            <label class="text"><input class="toggle" type="checkbox">' + $(this).val() + '</label>\
            </div>\
            </li>');
            // Добавление в массив
            var $this = $(this);
            var newTask = $this.val();
            tasks.push({id: i++, title: newTask, status: 'active'});
            $('.count').text(tasks.length + 1);
            // Очистка Input
            $('#new').val('');
        }
        else {
            return false;
        }
    }
});

$('#list .toggle').on('change', function() {
    $(this).parents('li').toggleClass('checked');
    if( $('#list .toggle:checked').length == $('#list .toggle').length ){
    $('#toggle-all').prop('checked', true);
  }else{
    $('#toggle-all').prop('checked', false);
  };
});

$('#toggle-all').on('click', function () {
    if ($('#list .toggle:checked').length == $('#list .toggle').length) {
        $('#list .toggle').prop('checked', false);
        $('#-list li').removeClass('checked');
    }
    else {
        $('#list .toggle').prop('checked', true);
        $('#list li').addClass('checked');
    }
});

<input id="new">
 <section id="main" style="display: none;">
<input id="toggle-all" type="checkbox"> <label for="toggle-all">Выделить все</label>
<ul id="list">


</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

#toggle-all {
  width: 60px;
  height: 34px;
  text-align: center;
  border: none;
  transform: rotate(90deg);
  -webkit-appearance: none;
  background: none;
  outline: none;
}

#toggle-all::before {
  content: "❯";
  font-size: 22px;
  color: #49f;
  padding: 10px 27px;
}

#toggle-all:checked {
  transform: rotate(-90deg);
}

#list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#list li {
  position: relative;
  font-size: 24px;
  border-top: 1px solid #49f;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

#list li:last-child {
  border-bottom: 1px solid #49f;
}

#list li .toggle {
  text-align: center;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
  margin: auto 0;
  border: none;
  -webkit-appearance: none;
  outline: none;
}

#list li .toggle:checked:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}

#list li .toggle:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>')
}

#list li label {
  box-sizing: border-box;
  white-space: pre-line;
  word-break: break-all;
  padding: 15px 60px 15px 15px;
  margin-left: 45px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

Answer 1

[MrTimon]

Потому что на момент когда Вы объявляете скрипт у вас нету классов .toggle поэтому ничего на них и не вешается.
Предлагаю эту строчку

$('#list .toggle').on('change', function() {

заменить на следующею

$('#list').on('change', '.toggle', function() {

P.S. Так же заметил лишний дефис в этой строчке
$('#-list li').removeClass('checked');

Comments

[Im p3l]

замена $('#list .toggle') на $('#list') не решает проблему

[MrTimon]

LoranDeMarcus: Так не просто замена $('#list .toggle') на $('#list') но еще и добавление '.toggle', после 'change',. Тоесть всю строку заменить нужно

[Im p3l]

MrTimon: Спасибо! 2 дня сидел мучался, а ответ оказался таким простым