Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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
222,348 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() {