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 trialGraham Davidson
Courses Plus Student 14,966 PointsProblems on a site with JQuery
Hi I have inherited some code and I am a bit stuck on a JQuery question.
The script on the attached JSFiddle is supposed to make the boxes at the bottom when click load their corresponding image on top of what is already there - click it again and it disappears.
The site is http://www.thegeorgebarton.co.uk/
3 Answers
Sean Templeton
12,983 PointsYou have a couple of issues. First off, there is a syntax error because you have a trailing })
at the end of your javascript;
Secondly, .live
is deprecated. Instead, use .on
with delegation. This is done by selecting a parent element, calling the "on" function. The first parameter is the event, the second the selector of the element you want to attache the event to, and the third the function to call.
Finally, you didn't have jQuery included.
Check this fiddle out to see the working changes: http://jsfiddle.net/Be4Fw/7/
Graham Davidson
Courses Plus Student 14,966 PointsHi Sean
Thanks for that, unfortunately that only allows you one click and then stops working. Do you know how to make it so I can click on each box and it have the enlarge pop up.
G
Sean Templeton
12,983 PointsYeah, that's a tricky one. Give me a few minutes.
Sean Templeton
12,983 PointsAhh, ok. If you look what you were calling to fadeout, you'll see the parent box was still there, even though you couldn't see it. Therefore, you were never actually clicking the boxes again. Here's a working example: http://jsfiddle.net/Be4Fw/8/
Graham Davidson
Courses Plus Student 14,966 PointsSean Templeton you total genius there is not a big enough thank you possible. Super star
Sean Templeton
12,983 PointsSean Templeton
12,983 PointsHere is the link to the relevant jQuery documentation: http://api.jquery.com/on/#direct-and-delegated-events