Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Daniel Silva
Daniel Silva
11,209 Points
Posted by Daniel Silva
Daniel Silva
11,209 Points

Added list items are not getting inheriting jQuery functions of deleting or checking off.

I have a todo list app here. When I add elements, they can't be deleted or removed like the other hard codes items. In other words, the functionality isn't working on newly added elements.

<div class="container-fluid">
    <h1>To-Do List 
        <span id="toggle-form">
            <i class="far fa-plus-square"></i>
        </span>
    </h1>
    <input id="task-input" type="text" placeholder="Add New Todo">
    <ul>
        <li>
            <span class="complete">
                <i class="far fa-check-square"></i>
            </span>
            <span class="delete">
                <i class="fa fa-trash"></i>
            </span> Go To Potions Class
        </li>
        <li>
            <span class="complete">
                <i class="far fa-check-square"></i>
            </span>
            <span class="delete">
                <i class="fa fa-trash"></i>
            </span> Buy New Robes
        </li>
        <li>
            <span class="complete">
                <i class="far fa-check-square"></i>
            </span>
            <span class="delete">
                <i class="fa fa-trash"></i>
            </span> Visit Hagrid
        </li>
    </ul>
</div>

$(document).ready(function(){
    $("input[type='text']").keypress(function(event){
        if(event.which === 13){
            //grabbing new todo text from input
            const $todoText = $(this).val();
            $(this).val("");
            //create a new li and add to ul
            const $li = $("<li>" + $todoText + "</li>");
            $("ul").append($li);
            $($li).prepend("<span class='complete'><i class='far fa-check-square'></i></span><span class='delete'><i class='fa fa-trash'></i></span>");
        }
    });
    //Hide and show the input field
    const $input = $('#task-input').hide();
    $('#toggle-form').click(function(){
        $($input).fadeToggle();
    });
    //Mark completed tasks
    $('.complete').on('click', function(){
        $(this).parent().toggleClass('completed');
    });
    //Delete and remove tasks
    $('.delete').on('click', function(){
        $(this).parent().fadeOut(400, function(){
            $(this).remove();
        });
    });

});

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

When new items are added, no new handlers are being added to their controls. So the controls are shown but they don't function.

You could add code to create more handlers, OR you could just change from using individual handlers to having a single delegated handler attached to the common ancestor (the ul) that would cover the new items also:

    //Delete and remove tasks - using delegated handler
    $("ul").on("click", ".delete", function() {