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

Jenny Swift
Jenny Swift
21,999 Points
Posted by Jenny Swift
Jenny Swift
21,999 Points

jquery doesn't work on text added to the page when button is clicked

Hi, I have some jquery that works until I try and apply it to an element that appears on the page when a button is clicked, (It is an empty div, and I use append() to add text to the div.) in which case it doesn't work anymore. If I enter the jquery code in the firebug console after I click the button, the jquery then works. But if I enter the jquery code in the firebug console before I click the button, the jquery doesn't work. What is causing this dependancy on the timing please, ie, if I use the jquery before or after the button is clicked, and what can I do to my code so that the jquery works after I have clicked the button?

Dave Evans
Dave Evans
13,160 Points

Please include the code you are using.

Jenny Swift
Jenny Swift
21,999 Points
Jenny Swift
Jenny Swift
21,999 Points

Sorry. Here it is. It's my first codepen so I hope I've done it clearly. I've made comments in it to try to explain what's going on.

1 Answer

Dave Evans
Dave Evans
13,160 Points
Dave Evans
Dave Evans
13,160 Points

Okay, I'm a little unsure as to your end-goal for this. When you click on the Add Todo link you are passing your desired title across and starting three addition fields for more detail for the task. I can see that is working. From there, do you want to save that data when you click on the Add Todo link again? I think for a better UX design, it would be better to have a submit or save button at the end of the task form which would remove the inputs and print the data in HTML.

Jenny Swift
Jenny Swift
21,999 Points
Jenny Swift
Jenny Swift
21,999 Points

Thanks for your reply. I figured out how to get it how I want it apart from some temperamental behavior. I have updated my codepen so now when an item is added to the list the extra fields are initially hidden, but they become visible when the item is clicked (I did this by using a function named toggle). This is what I wanted. But for some reason my toggle function is not working on every other item. So if I add just one item to the list it works fine. If I add two items it works fine on the second item but not the first. And if I add three items it works on the third and first items but not the second. Any idea how I can get it working on all of my items please?