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

Posted by Quillor Studio
Quillor Studio
7,658 Points

jQuery: Function not being applied to appended items.

Hi

I am creating a Grocery List app with jQuery: http://quillor.com/treehouse/jQuery/grocery-list-app/

And here is my jQuery code: http://quillor.com/treehouse/jQuery/grocery-list-app/js/app.js

Here's the problem:

With the demo content, the user is able to click an item to cross it off their list and hover to reveal a close button.

However, when a user adds a new item to the list, they are unable to cross it off or delete it.

Does anyone know why?

Feel free to play with the code here: http://quillor.com/treehouse/jQuery/grocery-list-app/download.zip

thanks!

6 Answers

eck
eck
43,038 Points

Similar to what I showed you before, you want to use the "on" method with three arguments. The event, the target, and the callback function. You have only passed the on method the event and function, which is okay unless you want to bind this event to new elements being created, which you do.

You can write something like this and the close button should work for new list items:

// trigger the close function if the project-description is clicked and the target of that click has the class "close"
$('.project-description').on("click", ".close", close);
miguelcastro2
PLUS
miguelcastro2
Courses Plus Student 6,573 Points
miguelcastro2
miguelcastro2
Courses Plus Student 6,573 Points

Because the new elements you create with your "add" method do not have jQuery event listeners associated with them since these elements were not present on your initial page load. jQuery will not automatically add event listeners to those new elements. The fix is to use the on() command which will essentially be able to access the new DOM elements.

http://api.jquery.com/on/

Quillor Studio
Quillor Studio
7,658 Points
Quillor Studio
Quillor Studio
7,658 Points

Thanks @miguelcastro2

Where should I put that in my code?

eck
eck
43,038 Points
eck
eck
43,038 Points

You could do the following to dynamically bind events to certain elements using the "on" method. The arguments it takes are: the event being listened for (as a string), the target of the event listener as a jQuery selection string and the callback o anonymous function.

// ################## Show List Item ##################

    // Hide Close icons on page load
        $('.close').hide();

    // Show on List Hover
        $('.project-description > ul').on("mouseover", "> li", function() {
            $(this).children('.close').show(200);
        });

    // Hide on Hover Leave
        $('.project-description > ul').on("mouseleave", "> li", function() {
            $(this).children('.close').hide();
        });

// ################## Cross Item Off List ##################
        $('.project-description > ul').on("click", "> li", function() {
            $(this).toggleClass('strike');
        });

Also, you probably want to have classes on the list items you are creating so that it is easier to target them with jQuery and CSS :D

Quillor Studio
Quillor Studio
7,658 Points
Quillor Studio
Quillor Studio
7,658 Points

Hi @erikkrieg,

Thanks for the help! The code you've provided is very helpful. I tried your suggestion and it seems to have worked for the cross out feature. See it here

I've added the on() command to the "Add New List" function. 

$('#add').on("click", addNewList);

and the "Delete List item" function: 

$('.close').on("click", close);

They work on the demo content, but they don't seem to work on new list items. Let me know if you have any suggestions.

Here's my jQuery Code

Download to Play around

Thank you so much!

Tim

Quillor Studio
Quillor Studio
7,658 Points
Quillor Studio
Quillor Studio
7,658 Points

Perfect! thanks Erik Krieg !