jquery not affecting new elements

Question

I'm doing a project, where i hava a todo list, and i start with 6 existing tasks. My jquery can access them, give them the class "completed", or remove it, and can delete the task itself. The problem is when i add a new task with a function, and this new task has the same classes as the originals, but jquery cannot access the new ones. Any help would be appreciated. Thank you.

Html (Input for user to add a new task & Original task)

<div class="newToDo">
   <input onclick="addTask()" id="ready" type="radio" name="ready"> <!-- onclick="addTask()"  -->
   <input type="text" name="todoTask" id="todoTask" placeholder="Create a new todo...">
</div>

<div id="tasksBox">
  <div class="newTasks">
     <input type="radio" class="bttComplete" name="bttComplete">
     <span>Complete Online Javascript Course</span>
     <div class="delete"></div>
  </div>
</div>

JavaScript (addTask)

function addTask(){
    var divNova = document.createElement("div");
    var userTask = document.createTextNode(document.getElementById("todoTask").value);
    var radioInput = document.createElement('input');
    var lineThrough = document.createElement('span');

    lineThrough.setAttribute('span', '');
    radioInput.setAttribute('type', 'radio');
    radioInput.setAttribute('name', 'bttComplete');
    radioInput.setAttribute('class', 'bttComplete');

    var del = document.createElement("div");

    $(divNova).addClass('newTasks');
    $(del).addClass('delete');

    lineThrough.appendChild(userTask);
    divNova.appendChild(radioInput);
    divNova.appendChild(lineThrough); 
    divNova.appendChild(del);

    var divAtual = document.getElementById("tasksBox"); 
    divAtual.appendChild(divNova);

    var remaining = document.getElementById('remainingTasks');
    divAtual.insertBefore(divNova, remaining);  

    incrementCounter();
}

Jquerie (Add/Remove completed & Delete task)

$(".bttComplete").click(function() {
        if ($(this).hasClass('completed')){
          $(this).removeClass('completed');
        } else {
          $(this).addClass('completed');
          //decrementCounter();
        };
    });

    $(".delete").click(function(){
        $(this).closest(".newTasks").remove();
      decrementCounter();
    });

jquery not affecting new elements

0 Answers0